Warum verhält sich „max-width: 100 %“ bei einem Bild innerhalb einer Tabellenzelle in Firefox und Opera anders als in Chrome und IE?

Diskrepanz im Verhalten der Max-Width-Eigenschaft in Firefox und Opera

In bestimmten Szenarien weisen Firefox- und Opera-Browser eine Diskrepanz im Vergleich zu Chrome und IE bei der Interpretation des CSS-Maximums auf -width-Eigenschaft. Insbesondere wenn ein Bild in einer Tabellenzelle (Anzeige: Tabellenzelle) platziert und der maximalen Breite 100 % zugewiesen wird, wird die Bildbreite in Firefox und Opera ignoriert, während sie in den anderen Browsern korrekt eingeschränkt wird.

Um den Grund für dieses Verhalten zu verstehen, ist es wichtig zu beachten, dass die CSS-Eigenschaft „max-width“ in der W3C-Spezifikation so definiert ist, dass sie nur für Elemente auf Blockebene gilt. Inline-Elemente wie sind von dieser Eigenschaft nicht betroffen. Im bereitgestellten HTML ist das Das Element ist standardmäßig auf display: inline eingestellt, was erklärt, warum Firefox und Opera den Stil mit maximaler Breite ignorieren.

Problemumgehung:

Um dieses Problem zu beheben und die beabsichtigte Bildbreite durchzusetzen, ist dies erforderlich um das anzuzeigendes Element: Block innerhalb der CSS-Stile. Die Verwendung dieser Problemumgehung kann jedoch zu Änderungen am Seitenlayout und der Formatierung führen.

Konforme Lösung:

Eine standardkonforme Lösung besteht darin, die Tabellenzelle (Anzeige: Tabellenzelle) innerhalb eines Wrapper-Divs zu platzieren Das ist auf display: table und table-layout: behoben eingestellt. Dieser Ansatz stellt sicher, dass alle untergeordneten Elemente innerhalb der Tabelle die angegebenen Breitenbeschränkungen einhalten, einschließlich der Element mit max-width: 100 %.

Alternativer Ansatz:

Eine andere Option besteht darin, JavaScript zu verwenden, um die Browserunterstützung für max-width innerhalb von display:table-cell-Elementen zu erkennen. Wenn der Browser dieses Verhalten nicht nativ unterstützt, kann eine alternative Layoutstrategie mithilfe von JavaScript implementiert werden.

Codebeispiel:

<code class="HTML"><div style="display: table;">
    <div style="display: table-cell; padding: 15px; width: 200px;">
        <img src="..." style="display: block; max-width: 100%" />
        <p>Text content...</p>
    </div>
</div></code>

Das obige ist der detaillierte Inhalt vonWarum verhält sich „max-width: 100 %“ bei einem Bild innerhalb einer Tabellenzelle in Firefox und Opera anders als in Chrome und IE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!