Warum funktioniert „display: inline-block' in Internet Explorer 7 nicht und wie kann ich das Problem beheben?

IE7-Anzeige: Inline-Block-Unfähigkeit

Treffen Sie Anzeige: Inline-Block-Probleme in Internet Explorer 7? Du bist nicht allein. Während diese Eigenschaft in Firefox einwandfrei funktioniert, scheint IE7 sich ihrer Existenz nicht bewusst zu sein.

Das Problem:

Mit dem bereitgestellten HTML und CSS:

<div class="frame-header">
    <h2>...</h2>
</div>

.frame-header {
    height: 25px;
    display: inline-block;
}

Das „Frame-Header“-Element in IE7 verhält sich nicht wie ein Inline-Block und behindert so das gewünschte Layout Ausgabe.

Die Lösung:

Um diese IE7-Eigenart zu beheben, verwenden Sie die folgende Anzeige: inline-block hack:

display: inline-block;
*display: inline;
zoom: 1;

Erklärung:

IE7 bietet begrenzte Unterstützung für Inline-Block und erkennt ihn nur innerhalb von selbst Inline-Elemente. Für Elemente außerhalb dieser Kategorie, wie „frame-header“ in unserem Beispiel, greift der Hack wie folgt ein:

• *display: inline; erzwingt Inline-Verhalten speziell für IE7 und niedriger.
• zoom: 1; löst hasLayout aus, eine entscheidende Eigenschaft für Inline-Block Verhalten.

Überlegungen:

Dieses CSS entspricht nicht den Validierungsstandards und kann möglicherweise andere Stile stören. Erwägen Sie daher die Verwendung eines reinen IE7-Stylesheets, das durch bedingte Kommentare implementiert wird:

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

Durch die Einbindung dieses gezielten Stylesheets können Sie das IE7-Problem „display: inline-block“ beheben, ohne die allgemeine CSS-Integrität zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „display: inline-block' in Internet Explorer 7 nicht und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!