Min Div forsvinner bak en Div i IE7

Div, eller divisjon, lagene er allsidige elementer som brukes på nesten hvert nettsted. Fordi du kan manipulere dem på ulike måter, blant annet overlapp dem med negative marginer eller absolutt eller relativ posisjonering, kan du skape interessante oppsett. Men overlapp kan blokkere ut elementer fra andre divs som vises bak laget. Dette kan være særlig hvis du har oppgradert fra Internet Explorer 6 til IE7.

div Behavior

Div lag er rektangulære beholdere som kan inneholde alle typer data eller innhold. Du kan bruke så mange divs som du vil på en webside og bruke stiler på en div-by-div basis. På grunn av dette, kan du velge å inneholde deler av nettstedet ditt, for eksempel sidefelt eller bunntekst, i divs eller bruke divs å ordne layout. Flere divs kan okkupere samme plass, avhengig av dine metoder. For eksempel kan du lage overlapp divs hvis du bruker absolutt eller relativ posisjonering for en eller flere divs. Hvis en div viser i fronten av en annen div, kan det blokkere innholdet som det opprinnelige laget inneholder med sin egen.

Internet Explorer og CSS

Hvis du opplever forskjellig div atferd i Internet Explorer 7 enn Internet Explorer 6, kan det være et resultat av Microsoft endre måten nettleseren håndterer CSS boksen modellen. IE6 og tidligere versjoner av nettleseren feil håndtert bredder, marginer og padding med HTML-elementer, for eksempel divs. Internet Explorer skal vise dine divs på riktig måte. Feil boksmodellen inkludert breddene av grenser og polstring i elementet bredde. Imidlertid bør den spesifiserte bredden være basisbredden, uten de ytterligere stiler. CSS som du brukte med Internet Explorer 6 vil gjengi bredere divs og elementer, potensielt forårsake overlapping, i Internet Explorer 7.

Box Model Solution

Når du arbeider med divs som oppfører seg annerledes i IE7 enn IE6, må du ta hensyn til plassen som brukes av grenser og polstring. For eksempel vil en 500-pixel bred div har dukket opp 500-piksler bred i IE6 uavhengig av padding, men vises nå bredere med polstring i IE7. Du må redusere bredden på div, i CSS, ved bredden av noen padding eller grenser. Hvis du har en 1-piksel grensen på både høyre og venstre, samt symmetrisk 5-pixel padding, må du endre bredden på div til 488-piksler - for å imøtekomme for grenser og polstring på begge sider - så det vil vise det samme i Internet Explorer 7. Dette vil gi mindre div som du ønsker og kan redusere overlapping mellom div lag i IE7.

Z-index

Hvis du har to divs som du ønsker å overlappe, men finner ut at man er helt andre dekker opp, kan du bruke z-index eiendom for å flytte en av divs i forgrunnen, slik at du kan se innholdet. Den z-index flytter elementer på din side nær deg, på den geometriske Z-tilgang. Som standard nettside elementene har en z-indeks på "0" og alle vises på samme nivå. Hvis du ønsker å tvinge en div til å vises på toppen av en annen i Internet Explorer 7, vil du endre sin z-indeksverdi til et tall som er høyere enn "0" eller endre verdiene av begge divs, slik at de vises "nærmere" til deg enn resten av innholdet. En div med følgende CSS vises foran noe annet innhold på siden din, slik at du kan se det. Du kan vurdere denne metoden til å vise tekst i en div foran et bilde i en annen div, for eksempel.
<Div style = "z-index: 1;"> Content her </ div>