Mengapa Lebar Maks Tidak Digunakan pada Imej dalam Sel Jadual dalam Firefox dan Opera?

Firefox dan Opera Mengabaikan Max-Width dalam Paparan: Table-Cell

Dalam coretan kod CSS yang diberikan, imej terkandung dalam jadual sel mengabaikan gaya lebar maks yang ditentukan dalam pelayar Firefox dan Opera. Memahami punca dan mencari penyelesaian merentas penyemak imbas adalah penting.

Seperti yang dijelaskan dalam spesifikasi W3C, lebar maks tidak digunakan pada elemen sebaris. Walaupun percubaan untuk menetapkan sifat paparan imej untuk disekat, isu ini berterusan.

Untuk membetulkan tingkah laku ini, div pembalut dengan paparan: jadual mesti ditambah di sekeliling div yang mengandungi sel jadual. Selain itu, div pembalut hendaklah termasuk susun atur jadual: harta tetap. Pengubahsuaian ini memastikan bahawa lebar maksimum dipatuhi dalam semua penyemak imbas yang disebutkan.

Penyelesaian Penyemak Imbas Rentas

Coretan kod yang dikemas kini di bawah dengan berkesan menyelesaikan masalah:

<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>

Dalam kod ini, div pembalut sel jadual diletakkan dalam div jadual dan reka letak jadual ditetapkan kepada tetap. Konfigurasi ini memastikan konsistensi merentas penyemak imbas, termasuk Firefox dan Opera.

Atas ialah kandungan terperinci Mengapa Lebar Maks Tidak Digunakan pada Imej dalam Sel Jadual dalam Firefox dan Opera?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!