Percentage breedte subelement in absoluut gepositioneerd bovenliggende Internet Explorer 7

stemmen
249

Ik heb een absoluut gepositioneerd divmet meerdere kinderen, waarvan één een relatief gepositioneerd div. Wanneer ik gebruik maken van een percentage op basis van de breedte van het kind div, het instort op '0' width op Internet Explorer 7 , maar niet op Firefox of Safari.

Als ik pixel breedte , het werkt. Als de ouder relatief gepositioneerd, het percentage van de breedte kindwerken.

  1. Is er iets wat ik hier mis?
  2. Is er een gemakkelijke oplossing voor dit naast de pixel-based breedte op het kind?
  3. Is er een gebied van de CSS-specificatie die dit dekt?
De vraag is gesteld op 31/07/2008 om 23:08
bron van user
In andere talen...                            


6 antwoorden

stemmen
129

De ouder divmoet hebben gedefinieerd width, hetzij in pixels of procenten. In Internet Explorer 7, de ouder divheeft een gedefinieerd widthvoor kind percentage divs correct te laten werken.

antwoordde op 01/08/2008 om 13:22
bron van user

stemmen
53

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>

antwoordde op 05/08/2008 om 06:54
bron van user

stemmen
34

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 .

antwoordde op 04/09/2008 om 10:02
bron van user

stemmen
30

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.

antwoordde op 13/05/2009 om 08:47
bron van user

stemmen
28

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.

antwoordde op 22/10/2010 om 17:21
bron van user

stemmen
1

De divbehoeften van een bepaalde breedte hebben:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
antwoordde op 07/09/2018 om 14:53
bron van user

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more