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

I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based width on the child div, it collapses to '0' width on Internet Explorer 7, but not on Firefox or Safari.

Dacă folosesc lățimea pixelilor , funcționează. Dacă părintele este poziționat relativ, lățimea procentuală a copilului funcționează.

  1. Există ceva care lipsesc aici?
  2. Există o remediere ușoară pentru aceasta, în afară de lățimea bazată pe pixeli de pe copil?
  3. Există o zonă a specificației CSS care acoperă acest lucru?
 0
adăugat editat
Vizualizări: 317
sursa
fr zh hi bn

4 răspunsuri

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>
</div></div>
0
adăugat
sursa

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>.

0
adăugat
sursa

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.

0
adăugat
sursa

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.

0
adăugat
sursa