Lățimea elementului lățime procentuală în părinte absolut poziționat în Internet Explorer 7

Iată câteva exemple de cod. Cred că asta este ceea ce căutați. Următoarele afișează exact la fel în Firefox 3 (mac) și IE7.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"><div class = "snippet-code">

  #absdiv {
  poziția: absolută;
  stânga: 100px;
  top: 100px;
  lățime: 80%;
  înălțime: 60%;
  fundal: # 999;
}

#pctchild {
  lățime: 60%;
  înălțime: 40%;
  fundal: #CCC;
}

#reldiv {
  poziție: relativă;
  stânga: 20px;
  top: 20px;
  înălțime: 25px;
  lățime: 40%;
  fundal: roșu;
}  

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

IE înainte de 8 are un aspect temporal față de modelul său cutie, care creează în mod deosebit o problemă cu lățimi procentuale bazate. În cazul tău, un cod absolut poziționat div nu are în mod prestabilit lățime. Lățimea sa va fi calculată pe baza lățimii pixelilor din conținutul său și va fi calculată după redarea conținutului. Deci, la punctul IE se întâlnește și face ca poziția dvs. relativ poziționată div să aibă o lățime de 0, de aceea ea însăși se prăbușește la 0.

Dacă doriți o discuție mai aprofundată despre acest lucru, împreună cu multe exemple de lucru, aveți un aici < / a>.

De ce nu?   în munca absolută poziționată   în IE7?

Pentru că este Exploder Internet

Există ceva ce lipsesc aici?

Asta este, pentru a crește conștiința colegilor / clienților dvs. că IE e de rahat.

Există o remediere ușoară pe lângă lățimea pe pixeli pe copil?

Utilizați unitățile em deoarece acestea sunt mai utile atunci când creați machete lichide, pe măsură ce le puteți folosi pentru umplutură și margini, precum și dimensiuni ale fontului. Astfel, spațiul dvs. alb crește și se micșorează proporțional cu textul dvs. dacă este redimensionat (ceea ce este într-adevăr ceea ce aveți nevoie). Nu cred că procentele oferă un control mai bun decât ems; nu este nimic pentru a vă opri să precizați în sute de ems (0,01 em) și browser-ul va interpreta după cum consideră potrivit.

Există o zonă a specificației CSS care acoperă acest lucru?

Nimeni, în măsura în care îmi amintesc că em 's și% s-au destinat doar dimensiunilor de fonturi la CSS 1.0.

Cred că acest lucru are legătură cu modul în care proprietatea hasLayout este implementată în browserul mai vechi.

Ați încercat codul dvs. în IE8 pentru a vedea dacă funcționează și acolo? IE8 are un Debugger ( F12 ) și poate rula, de asemenea, în modul IE7.