Element potomny o szerokości procentowej w absolutnie pozycjonowanym rodzicu w Internet Explorerze 7

Mam pozycję absolutnie divzawierającą kilka dzieci, z których jedno jest względnie ustawione div. Gdy używam znaku percentage-based widthpotomnego div, spada on do 0 widthIE7, ale nie do Firefoxa ani Safari.

Jeśli użyję pixel width, to działa. Jeśli element nadrzędny jest względnie ustawiony, działa procentowa szerokość elementu podrzędnego.

1. Czy czegoś tu brakuje?
2. Czy jest na to łatwa naprawa oprócz tego pixel-based widthna dziecku?
3. Czy istnieje obszar specyfikacji CSS, który to obejmuje?

Element nadrzędny divmusi mieć zdefiniowaną wartość width, w pikselach lub procentowo. W przeglądarce Internet Explorer 7 element nadrzędny divmusi mieć zdefiniowany widthprocent dziecka, divaby działał poprawnie.

Oto przykładowy kod. Myślę, że tego właśnie szukasz. Poniżej pokazano dokładnie to samo w Firefox 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 w swoim modelu pudełkowym, który w szczególności stwarza problem z szerokościami procentowymi. W twoim przypadku absolutnie ustawione divdomyślnie nie ma szerokości. Jego szerokość zostanie opracowana na podstawie szerokości piksela zawartości i zostanie obliczona po renderowaniu zawartości. W tym momencie IE napotyka i renderuje, że twój względnie ustawiony divjego rodzic ma szerokość 0, dlatego sam się zapada do 0.

Jeśli chcesz bardziej dogłębną dyskusję na ten temat wraz z wieloma praktycznymi przykładami, zerknij tutaj .

Dlaczego procent podrzędny szerokości elementu nadrzędnego w absolutnie pozycjonowanym rodzicu nie działa w IE7?

Ponieważ to Internet Explorer

Czy czegoś tu brakuje?

Oznacza to zwiększenie świadomości współpracownika / klientów, że IE jest do bani.

Czy istnieje łatwa poprawka oprócz szerokości opartej na pikselach dla dziecka?

Używaj emjednostek, ponieważ są one bardziej przydatne podczas tworzenia płynnych układów, ponieważ możesz ich używać do wypełniania i marginesów, a także rozmiarów czcionek. Twoja biała przestrzeń rośnie i kurczy się proporcjonalnie do tekstu, jeśli zostanie zmieniony (co jest naprawdę tym, czego potrzebujesz). Nie sądzę, że procenty dają lepszą kontrolę niż ems; nie ma nic, co mogłoby Cię powstrzymać od określenia setnych części ems (0,01 em), a przeglądarka zinterpretuje według własnego uznania.

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

Żadne, o ile pamiętam em,% i były przeznaczone dla samych rozmiarów czcionek w CSS 1.0.

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

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

Że divmusi mieć określoną szerokość:

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