Warum ignoriert „max-width' Bilder in „display: table-cell' in Firefox und Opera?

Browser-Inkonsistenzen mit max-width Inside display: table-cell

Unter bestimmten Umständen wird die Stileigenschaft max-width innerhalb der Anzeige ignoriert : Tabellenzellenelemente in Firefox und Opera, auch wenn sie in Chrome und IE korrekt angezeigt werden. Diese Inkonsistenz wirft Fragen nach der Ursache und der am besten geeigneten Lösung auf.

Ursache

Gemäß der W3C-Spezifikation gilt max-width nicht für Inline-Elemente. Allerdings werden Bilder innerhalb von display:table-cell in den meisten Browsern als blockartig betrachtet, während Firefox und Opera sie als inline behandeln. Dieser Unterschied in der Interpretation führt zu einem inkonsistenten Verhalten.

Problemumgehung

Eine Problemumgehung besteht darin, das Display: Table-Cell Wrapper-Div in einem anderen Div mit Display: Table und zu platzieren Tabellenlayout: behoben. Dies zwingt Firefox und Opera dazu, die Regel der maximalen Breite einzuhalten.

Beispiel

<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>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </p>
  </div>
</div></code>

Empfehlung

Am meisten Ein standardkonformer Ansatz besteht darin, die Verwendung von max-width für Inline-Elemente zu vermeiden, einschließlich Bildern in display:table-cell. Verwenden Sie stattdessen alternative Methoden zur Steuerung der Breite solcher Elemente.

Das obige ist der detaillierte Inhalt vonWarum ignoriert „max-width' Bilder in „display: table-cell' in Firefox und Opera?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!