Heim > Web-Frontend > CSS-Tutorial > Warum ignoriert „max-width' Bilder in „display: table-cell' in Firefox und Opera?

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

Linda Hamilton
Freigeben: 2024-10-27 14:24:29
Original
843 Leute haben es durchsucht

Why Does `max-width` Ignore Images Inside `display: table-cell` in Firefox and 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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage