Warum verhält sich „max-width“ in Firefox und Opera für Bilder in Tabellenzellen unterschiedlich?

Verstehen der Unterschiede im Verhalten bei maximaler Breite zwischen Firefox und Opera

Bei der Webentwicklung ist es unerlässlich, die browserübergreifende Kompatibilität sicherzustellen. Ein Bereich, in dem es zu Unstimmigkeiten kommt, ist die Handhabung von CSS-Stilen innerhalb von Tabellenzellen. In diesem Fall zeigen Firefox und Opera im Vergleich zu Chrome und IE ein anderes Verhalten, wenn es um die Eigenschaft „max-width“ geht.

Beachten Sie den folgenden HTML- und CSS-Code:

<code class="html"><div style="display: table-cell; padding: 15px; width: 200px;">
  <img src="image.jpg" style="max-width: 100%;" />
  <p>Content</p>
</div></code>

In Chrome und IE, dieser Code setzt die maximale Breite des Bildes korrekt auf 100 % der enthaltenden Zelle. In Firefox und Opera wird der Stil „max-width“ jedoch ignoriert.

Warum die Diskrepanz?

Die Spezifikation des World Wide Web Consortium (W3C) besagt, dass max- Die Breite gilt nicht für Inline-Elemente. Inline-Elemente wie Bilder haben keine intrinsische Breite oder Höhe und ihre Abmessungen werden normalerweise durch den Inhalt bestimmt, den sie enthalten.

Im bereitgestellten Beispiel ist das Bild-Tag ein Inline-Element innerhalb der Tabellenzelle. Daher hat der Stil mit maximaler Breite keine Auswirkung.

Eine Lösung, die funktioniert

Um dieses Problem zu beheben und die browserübergreifende Kompatibilität sicherzustellen, können Sie den folgenden Ansatz verfolgen :

1. Umschließen Sie das Tabellenzellen-Div in ein anderes Div mit display: table und table-layout: behoben.
2. Dadurch werden Firefox und Opera gezwungen, die Regel für die maximale Breite auf das Bild anzuwenden innerhalb der Tabellenzelle.

Das aktualisierte HTML und CSS:

<code class="html"><div style="display: table;">
  <div style="display: table-cell; padding: 15px; width: 200px;">
    <img src="image.jpg" style="max-width: 100%;" />
    <p>Content</p>
  </div>
</div></code>

Durch die Implementierung dieser Problemumgehung können Sie das gewünschte Verhalten in allen gängigen Browsern beibehalten.

Das obige ist der detaillierte Inhalt vonWarum verhält sich „max-width“ in Firefox und Opera für Bilder in Tabellenzellen unterschiedlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!