Mengapa Firefox dan Opera Tidak Menghormati Max-Width pada Imej Dalam Paparan: table-cell?

Mengatasi Pengabaian lebar maksimum dalam Firefox dan Opera dalam Paparan: sel jadual

Walaupun spesifikasi lebar maksimum untuk imej, Firefox dan Opera mengabaikan gaya ini dalam paparan: table-cell. Ini boleh membawa kepada tingkah laku yang tidak dijangka apabila cuba mengekang lebar imej dalam struktur seperti jadual.

Sebab untuk Mengabaikan Max-Width

Mengikut spesifikasi W3C, sifat lebar maks tidak digunakan pada elemen sebaris. Imej, secara lalai, ialah elemen sebaris. Oleh itu, dalam sel jadual (yang bertindak sebagai elemen sebaris), lebar maks diabaikan.

Penyelesaian dan Pematuhan Standard W3C

Satu penyelesaian melibatkan penyusunan kandungan div sel jadual dalam div lain yang mempunyai paparan: jadual dan susun atur jadual: tetap. Dengan menetapkan sifat ini pada bekas induk, Firefox dan Opera menghormati peraturan lebar maksimum untuk imej dalam sel jadual.

Penyelesaian ini memastikan pematuhan dengan spesifikasi W3C, kerana ia tidak mengubah suai sifat sebaris lalai imej dalam paparan: sel jadual. Ia hanya menambah struktur jadual pada bekas induk, memaksa penyemak imbas untuk merawat sel dalam sebagai sel jadual dan bukannya elemen sebaris.

Contoh

Di bawah ialah contoh penyelesaian ini dalam tindakan:

<code class="html"><div style="display: table;">
  <div style="display: table-cell; padding: 15px; width: 200px;">
    <img src="image.png" style="max-width: 100%;" />
    <p>Content goes here...</p>
  </div>
</div></code>

Dengan menggunakan teknik ini, anda boleh mengekalkan penskalaan imej yang diingini dalam sel jadual sambil memastikan keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Mengapa Firefox dan Opera Tidak Menghormati Max-Width pada Imej Dalam Paparan: table-cell?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!