Warum funktioniert meine Inline-Block-Anzeige in IE8 nicht?-CSS-Tutorial-php.cn

Warum funktioniert meine Inline-Block-Anzeige in IE8 nicht?

Patricia Arquette

Freigeben： 2024-10-29 21:35:02

Original

833 Leute haben es durchsucht

Why Is My Inline-Block Display Not Working in IE8?

IE8: Fehlerbehebung bei Anzeige-Inline-Block-Problemen

Im Bereich der Webentwicklung stellt das Streben nach einem bestimmten visuellen Layout eine häufige Herausforderung dar für Programmierer. Ein Aspekt dieses Prozesses besteht darin, die korrekte Elementausrichtung sicherzustellen, insbesondere in verschiedenen Browserumgebungen. Eine Methode zur Elementpositionierung, die bei Entwicklern oft Frustration hervorruft, ist die Inline-Block-Anzeige.

Problem:

Bedenken Sie den folgenden Codeausschnitt:

<style type="text/css" media="all">
  span, ul, ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    list-style: none;
  }   
</style>

<span>i would want</span>
<ul>
  <li>this</li>
  <li>on</li>
  <li>one line.</li>
</ul>

Nach dem Login kopieren

Das gewünschte Ergebnis in IE8 besteht darin, dass die Elemente inline ausgerichtet sind. Allerdings haben sich Versuche, diese Ausrichtung zu erreichen, trotz der angeblichen Unterstützung des Inline-Blocks durch IE8 als erfolglos erwiesen.

Lösung:

Überraschenderweise liegt der Übeltäter möglicherweise nicht im Inline-Block -Block-Deklaration selbst. Stattdessen beeinträchtigt wahrscheinlich ein fehlender Doctype das korrekte Anzeigeverhalten im IE8. Um dieses Problem zu beheben, fügen Sie einfach die folgende Doctype-Deklaration als erste HTML-Zeile hinzu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nach dem Login kopieren

Erklärung:

Die Doctype-Deklaration weist den Browser an, darin zu arbeiten einen bestimmten Modus, der die Kompatibilität mit der angegebenen HTML-Spezifikation gewährleistet. Ohne einen Doctype greift IE8 möglicherweise auf seinen Standardkompatibilitätsmodus zurück, wodurch die Anzeige des Inline-Blocks möglicherweise falsch dargestellt wird. Indem wir den Rendering-Modus mithilfe des Doctypes explizit definieren, überschreiben wir dieses Verhalten und ermöglichen die gewünschte Inline-Block-Ausrichtung.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine Inline-Block-Anzeige in IE8 nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!