Warum gilt die maximale Breite nicht für Bilder in Tabellenzellen in Firefox und Opera?

Firefox und Opera ignorieren die maximale Breite in der Anzeige: Tabellenzelle

Im angegebenen CSS-Codeausschnitt das in einer Tabelle enthaltene Bild cell ignoriert den angegebenen Max-Width-Stil in den Browsern Firefox und Opera. Es ist von entscheidender Bedeutung, die Ursache zu verstehen und eine browserübergreifende Lösung zu finden.

Wie in den W3C-Spezifikationen klargestellt, gilt max-width nicht für Inline-Elemente. Trotz Versuchen, die Anzeigeeigenschaft des Bildes auf „Blockieren“ zu setzen, besteht das Problem weiterhin.

Um dieses Verhalten zu beheben, muss ein Wrapper-Div mit display:table um das Div, das die Tabellenzelle enthält, hinzugefügt werden. Darüber hinaus sollte das Wrapper-Div die Eigenschaft table-layout: Fixed enthalten. Diese Änderung stellt sicher, dass die maximale Breite in allen genannten Browsern eingehalten wird.

Browserübergreifende Lösung

Der untenstehende aktualisierte Codeausschnitt löst das Problem effektiv:

<code class="css"><div style="display: table">
  <div style="display: table-cell; width: 200px; table-layout: fixed;">
    <img src="my-image.jpg" style="max-width: 100%;" />
  </div>
</div></code>

In diesem Code wird das Wrapper-Div der Tabellenzelle innerhalb eines Tabellen-Div platziert und das Tabellenlayout ist auf „Fest“ eingestellt. Diese Konfiguration gewährleistet Konsistenz über alle Browser hinweg, einschließlich Firefox und Opera.

Das obige ist der detaillierte Inhalt vonWarum gilt die maximale Breite nicht für Bilder in Tabellenzellen in Firefox und Opera?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!