Warum bricht „display: inline-block' in IE6 und IE7 ab und wie kann ich das beheben?

Inline-Block-Kompatibilitätsprobleme in Internet Explorer 6 und 7

Trotz ihrer weit verbreiteten Verwendung ist die CSS-Eigenschaft „display: inline-block“ hat bekannte Kompatibilitätsprobleme in älteren Versionen von Internet Explorer. Insbesondere funktioniert es in IE6 und IE7 nicht wie erwartet.

IE6/IE7-Macken mit Inline-Block

In IE6 und IE7 wird „display: inline-block“ angezeigt " Funktioniert nur ordnungsgemäß bei Elementen, die von Natur aus inline sind, wie z. B. Spannen. Die Anwendung auf Elemente auf Blockebene wie Divs führt zu unerwartetem Verhalten.

Problemumgehung für IE6/IE7

Um diese Probleme in IE6 und IE7 zu beheben, gibt es eine spezielle Problemumgehung notwendig:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Die Pseudoklasse „*display: inline“ verwendet einen CSS-Hack, der nur auf IE7 abzielt früher. Die Eigenschaft „zoom: 1“ zwingt IE6 und IE7 dazu, das Element als „Layout“ zu erkennen, was für die ordnungsgemäße Funktion von „display: inline-block“ erforderlich ist.

Zusätzliche Hinweise

Obwohl dies technisch möglich ist, wird nicht empfohlen, zu versuchen, diese Problemumgehung bei gültigem CSS beizubehalten und gleichzeitig vom Hersteller vorgegebene Eigenschaften zu verwenden. Ein umfassendes Verständnis von „display: inline-block“ und seinen Kompatibilitätsproblemen finden Sie in der verlinkten Ressource in der bereitgestellten Antwort.

Das obige ist der detaillierte Inhalt vonWarum bricht „display: inline-block' in IE6 und IE7 ab und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!