Procent szerokości elementu potomnego w absolutnie pozycjonowanym rodzicu w Internet Explorer 7

Oto przykładowy kod. Myślę, że tego właśnie szukasz. Poniższe wyświetla dokładnie to samo w Firefoksie 3 (mac) i IE7.

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}

<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

IE przed 8 ma aspekt czasowy do modelu pudełkowego, który przede wszystkim stwarza problem z szerokościami procentowymi. W Twoim przypadku absolutna pozycja div domyślnie nie ma szerokości. Jego szerokość zostanie obliczona na podstawie szerokości w pikselach jego zawartości i zostanie obliczona po renderowaniu zawartości. Tak więc w punkcie IE napotka i renderuje Twój relatywnie umieszczony div jego rodzic ma szerokość 0, dlatego samo się zapada do 0.

Jeśli chciałbyś bardziej dogłębna dyskusja na ten temat wraz z wieloma przykładami roboczymi, zajrzyj tutaj .

Dlaczego szerokość procentowa dziecka w absolutnie pozycjonowanej pracy rodziców w IE7?

Bo to Internet Exploder

Czy coś mi umyka?

To znaczy, aby podnieść świadomość współpracowników / klientów, że IE jest do bani.

Czy istnieje Łatwa poprawka oprócz szerokości opartej na pikselach na dziecku?

Używaj jednostek em, ponieważ są one bardziej przydatne podczas tworzenia płynnych układów, ponieważ można ich używać do wypełniania i marginesy oraz rozmiary czcionek. Tak więc biała przestrzeń rośnie i kurczy się proporcjonalnie do tekstu, jeśli jest on zmieniany (co naprawdę jest tym, czego potrzebujesz). Nie wydaje mi się, żeby procenty dawały lepszą kontrolę niż ems; nic nie stoi na przeszkodzie, aby określać w setnych częściach ems (0.01 em) i przeglądarka zinterpretuje to, co uzna za stosowne.

Czy istnieje obszar specyfikacji CSS, który to obejmuje?

Brak, z tego co pamiętam em'S I %'S były przeznaczone dla rozmiarów czcionek sam w CSS 1.0.

Myślę, że ma to coś wspólnego ze sposobem implementacji właściwości hasLayout w starszej przeglądarce.

Próbowałeś kodu w IE8, aby sprawdzić, czy tam też działa? IE8 posiada Debugger ( F12) i może również działać w trybie IE7.

Div musi mieć określoną szerokość

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>