Warum funktioniert Inline-Block in Internet Explorer 6 und 7 nicht und wie kann ich das Problem beheben?

Inline-Block-Probleme in Internet Explorer 6 und 7

Das Konzept des Inline-Blocks in CSS ermöglicht es Elementen, sich sowohl als Inline- als auch als Block-Elemente zu verhalten -Level-Elemente gleichzeitig. Wenn Sie jedoch auf Probleme mit dem Inline-Block stoßen, der in Internet Explorer 6 und 7 nicht funktioniert, sind Sie nicht allein.

Das Problem:

Standardmäßig , inline-block funktioniert nur bei inhärenten Inline-Elementen, wie z. B. Spans. Die Anwendung auf andere Elemente wie Divs in IE6 und IE7 kann zu unvorhersehbarem Verhalten führen.

Die Lösung:

So beheben Sie dieses Problem und aktivieren den Inline-Block auf Nicht- Inline-Elemente in IE6/7 müssen Sie eine Problemumgehung anwenden. Dazu gehört das Hinzufügen des folgenden CSS:

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

Hier ist eine Aufschlüsselung der Problemumgehung:

• *display: inline ist ein „sicherer“ CSS-Hack, der auf IE7 und niedriger abzielt. Es überschreibt die vom Inline-Block festgelegte Anzeigeeigenschaft.
• zoom: 1 zwingt IE6/7 dazu, „Layout“ auf das Element anzuwenden. Das Layout ist wichtig, damit Inline-Block konsistent funktioniert.

Zusätzliche Überlegungen:

Es ist möglich, diese Problemumgehung unter Beibehaltung von gültigem CSS zu implementieren, im Allgemeinen ist dies jedoch nicht der Fall empfohlen, insbesondere wenn Sie bereits andere herstellerspezifische Präfixe verwenden.

Weitere Einblicke in display: inline-block finden Sie unter externe Ressourcen, aber beachten Sie, dass -moz-inline-stack nicht mehr notwendig ist, da es nur für Firefox 2 gilt.

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