Warum verhält sich meine Div-Stacking-Reihenfolge in IE6 und 7 unterschiedlich?

Internet Explorer 6 und 7 Z-Index-Problem

Problem:
Auf einer Webseite mit zwei divs, div#sign-post sollte über div#bottom erscheinen, dies tritt jedoch nur in anderen Browsern als Internet Explorer (IE) 6 und 7 auf. Darüber hinaus zeigt IE6 oben in div#bottom zusätzliche 198 Pixel an.

Lösung:

Z-Index in IE6/7 verstehen

In den meisten Browsern ermöglicht die Z-Index-Eigenschaft das Stapeln von Elementen über oder unter anderen basierend auf ihren zugewiesenen Werten. In IE6 und 7 erstellen positionierte Elemente jedoch unabhängig von Z-Indexwerten neue Stapelkontexte.

Das Problem

In diesem Fall hat div#sign-post einen höheren Z-Index als div#bottom, aber IE6/7 vergleicht die Stapelkontexte ihrer Eltern, die im IE von den positionierten Elementen selbst erstellt werden. Da weder div#sign-post noch div#bottom explizit Z-Index-Werte festgelegt haben, bestimmt die Dokumentreihenfolge deren Stapelung, sodass div#bottom oben angezeigt wird.

Problemumgehung:

Um dieses Problem zu beheben, ist es notwendig, den positionierten Vorfahren der betroffenen Elemente Z-Index-Werte zuzuweisen.

1. Identifizieren die positionierten Vorfahren, die die Stapelkontexte erstellen.
2. Verwenden Sie JavaScript oder CSS, um diesen Vorfahren einen hohen Z-Index zuzuweisen und so die gewünschte Stapelreihenfolge zu erzwingen.

Wenn beispielsweise div #parent enthält div#sign-post. Weisen Sie div#parent einen Z-Index von 1000 zu, um es darüber zu platzieren div#bottom.

Zusätzliches IE6-Problem

Die zusätzlichen 198 Pixel oben in div#bottom in IE6 sind auf eine interne Berechnung des Standardspielraums zurückzuführen. Dieses Problem kann gelöst werden, indem der Rand von div#bottom explizit auf 0px gesetzt wird.

Das obige ist der detaillierte Inhalt vonWarum verhält sich meine Div-Stacking-Reihenfolge in IE6 und 7 unterschiedlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!