Persentasie breedte kind element in absoluut geposisioneerde ouer op Internet Explorer 7

Question

Ek het 'n absoluut geposisioneerde div wat verskeie kinders bevat, waarvan een relatief geposisioneer is div.Wanneer ek a persentasie-gebaseerde breedte op die kind div, dit val in tot '0' breedte op Internet Explorer 7, maar nie op Firefox of Safari nie.

As ek gebruik pixel breedte, dit werk.As die ouer relatief geposisioneer is, werk die persentasie breedte op die kind.

1. Is daar iets wat ek hier mis?
2. Is daar 'n maklike oplossing hiervoor behalwe die pixel-gebaseerde breedte op die kind?
3. Is daar 'n area van die CSS-spesifikasie wat dit dek?

Answer 1

Die ouer div moet 'n gedefinieerde hê width, hetsy in pixels of as 'n persentasie.In Internet Explorer 7, die ouer div benodig 'n gedefinieerde width vir kinderpersentasie divs om reg te werk.

Answer 2

Hier is 'n paar voorbeeldkode.Ek dink dit is waarna jy soek.Die volgende vertoon presies dieselfde 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>

Answer 3

IE voor 8 het 'n tydelike aspek aan sy boksmodel wat veral 'n probleem met persentasie-gebaseerde breedtes skep.In jou geval hier 'n absoluut geposisioneer div het by verstek geen breedte nie.Die breedte daarvan sal uitgewerk word op grond van die pixelwydte van sy inhoud en sal bereken word nadat die inhoud weergegee is.So op die punt wat IE teëkom en jou relatief geposisioneer maak div sy ouer het 'n breedte van 0, vandaar hoekom dit self ineenstort tot 0.

As jy 'n meer in-diepte bespreking hiervan wil hê saam met baie werkende voorbeelde, kyk gerus hier.

Answer 4

Waarom werk die persentasie breedte kind in absoluut geposisioneerde ouer in IE7?

Omdat dit Internet Exploder is

Is daar iets wat ek hier mis?

Dit wil sê om jou medewerker/kliënte se bewustheid te verhoog dat IE suig is.

Is daar 'n maklike oplossing behalwe die pixel-gebaseerde breedte op die kind?

Gebruik em eenhede, aangesien dit nuttiger is wanneer u vloeibare uitlegte skep, aangesien u dit kan gebruik vir opvulling en kantlyne sowel as lettergroottes.So jou wit spasie groei en krimp proporsioneel tot jou teks as dit verander word (wat regtig is wat jy nodig het).Ek dink nie persentasies gee 'n fyner beheer as ems nie;daar is niks wat jou keer om in honderdstes van ems (0.01 em) te spesifiseer nie en die blaaier sal interpreteer soos dit goeddink.

Is daar 'n area van die CSS-spesifikasie wat dit dek?

Geen, sover ek onthou em's en %'s was bedoel vir lettergroottes alleen terug by CSS 1.0.

Answer 5

Ek dink dit het iets te doen met die manier waarop die hasLayout eiendom word in die ouer blaaier geïmplementeer.

Het jy jou kode in IE8 probeer om te sien of dit ook daar werk?IE8 het 'n ontfouter (F12) en kan ook in IE7-modus werk.

Answer 6

Die div moet 'n gedefinieerde breedte hê:

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