Percentage breedte subelement in absoluut gepositioneerd bovenliggende Internet Explorer 7

Hier ziet u enkele voorbeelden van code. Ik denk dat dit is wat je zoekt. De volgende displays exact hetzelfde in Firefox 3 (MAC) en 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 vóór 8 heeft een temporeel aspect zijn doosmodel dat met name een probleem met procentuele breedte ontstaat. In uw geval hier een absoluut gepositioneerd divheeft standaard geen breedte. De breedte zal worden uitgewerkt op basis van de pixel breedte van de inhoud ervan en zal worden berekend nadat de inhoud worden weergegeven. Dus op het punt IE ontmoet en maakt je relatief gepositioneerd divzijn ouder heeft een breedte van 0 dus reden waarom het zich stort op 0.

Wilt u een meer diepgaande bespreking van dit samen met veel werkende voorbeelden, hebben een kijkje hier .

Waarom werkt het percentage breedte kind in absoluut gepositioneerd ouder werk in IE7?

Omdat het Internet Exploder

Is er iets wat ik hier mis?

Dat wil zeggen, / cliënten bewust te maken van uw collega's die IE zuigt verhogen.

Is er een makkelijke oplossing naast de pixel-based breedte op het kind?

Gebruik emeenheden zoals ze zijn meer handig bij het maken van vloeibare lay-outs zoals u ze kunt gebruiken voor opvulling en marges alsmede lettergroottes. Dus je witte ruimte groeit en krimpt in verhouding tot uw tekst als deze is aangepast (dat is echt wat je nodig hebt). Ik denk niet dat percentages geven een fijnere controle dan ems; er is niets om je te stoppen met vermelding in honderdsten van EMS (0,01 em) en de browser zal interpreteren als zij dat nodig acht.

Is er een gebied van de CSS-specificatie die dit dekt?

Geen, voor zover ik herinner me em's en%' s waren bestemd voor lettergroottes alleen terug bij CSS 1.0.

Ik denk dat dit iets te maken heeft met de manier waarop het hasLayoutpand is in de oudere browser geïmplementeerd.

Heeft u geprobeerd uw code in IE8 te zien of werken er ook bij? IE8 een debugger ( F12) en kan ook draaien in IE7 modus.

De divbehoeften van een bepaalde breedte hebben:

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