Prosentvis bredde ordnet element i absolutt posisjonert forelder på Internet Explorer 7

stemmer
270

Jeg har en helt posisjonert divsom inneholder flere barn, hvorav den ene er en forholdsvis plassert div. Når jeg bruker en prosentbasert bredde på barnet div, kollapser det til '0' width på Internet Explorer 7 , men ikke på Firefox eller Safari.

Hvis jeg bruker pixel bredde , det fungerer. Dersom den overordnede er forholdsvis plassert, den prosentvise bredde på barnet virker.

  1. Er det noe jeg mangler her?
  2. Finnes det en enkel løsning på dette i tillegg til pikselbasert bredde på barnet?
  3. Er det et område av CSS-spesifikasjonen som dekker dette?
Publisert på 31/07/2008 klokken 22:08
kilden bruker
På andre språk...                            


6 svar

stemmer
132

Den overordnede divbehov for å ha en definert width, enten i piksler eller som en prosentandel. I Internet Explorer 7, foreldrene divtrenger en definert widthfor barnet prosent divs for å fungere korrekt.

Svarte 01/08/2008 kl. 12:22
kilden bruker

stemmer
53

Her er noen eksempelkode. Jeg tror dette er hva du leter etter. Følgende viser nøyaktig det samme i Firefox 3 (mac) og 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>

Svarte 05/08/2008 kl. 05:54
kilden bruker

stemmer
34

IE før 8 har en tidsaspektet til sin boks modell som særlig skaper et problem med prosent basert bredder. I ditt tilfelle her en helt plassert divsom standard har ingen bredde. Dens bredde vil bli utarbeidet basert på billedelementbredden av dets innhold, og vil bli beregnet etter at innholdet er gjengitt. Så på det punktet IE møter og gjør din relativt posisjonert divsin forelder har en bredde på 0 dermed hvorfor det seg sammen til 0.

Hvis du ønsker en mer inngående drøfting av dette sammen med masse arbeidseksempler, har en gasse her .

Svarte 04/09/2008 kl. 09:02
kilden bruker

stemmer
30

Hvorfor fungerer ikke den prosentvise bredden barn i absolutt posisjonert ordnede arbeidet i IE7?

Fordi det er Internet Exploder

Er det noe jeg mangler her?

Det er, for å øke din kollegas / kundenes bevissthet om at IE suger.

Finnes det en enkel løsning i tillegg til pikselbasert bredde på barnet?

Bruk emenheter som de er mer nyttig når man lager flytende utforminger som man kan bruke dem for polstring og marginer samt skriftstørrelser. Så din tomrom vokser og krymper proporsjonalt med teksten hvis den er endret (som er virkelig hva du trenger). Jeg tror ikke prosenter gi en bedre kontroll enn EMS; det er ingenting å stoppe deg spesifisere i hundredeler av EMS (0,01 em) og nettleseren vil tolke som det ser passe.

Er det et område av CSS-spesifikasjonen som dekker dette?

Ingen, så vidt jeg husker em's og%' s var ment for skriftstørrelser alene tilbake på CSS 1.0.

Svarte 13/05/2009 kl. 07:47
kilden bruker

stemmer
28

Jeg tror dette har noe å gjøre med måten hasLayouteiendommen er implementert i den eldre nettleser.

Har du prøvd koden i IE8 for å se om fungerer i det, også? IE8 har et feilsøkingsprogram ( F12) og kan også kjøres i IE7 modus.

Svarte 22/10/2010 kl. 16:21
kilden bruker

stemmer
1

De divmå ha en definert bredde:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
Svarte 07/09/2018 kl. 14:53
kilden bruker

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