Mengapakah `lebar maksimum` Berkelakuan Berbeza dalam Firefox dan Opera untuk Imej dalam Sel Jadual?

Memahami Perbezaan dalam Gelagat lebar maksimum antara Firefox dan Opera

Dalam pembangunan web, adalah penting untuk memastikan keserasian merentas penyemak imbas. Satu kawasan di mana percanggahan timbul ialah pengendalian gaya CSS dalam sel jadual. Dalam keadaan ini, Firefox dan Opera mempamerkan gelagat yang berbeza berbanding Chrome dan IE apabila ia berkaitan dengan sifat lebar maksimum.

Pertimbangkan kod HTML dan CSS berikut:

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

Dalam Chrome dan IE, kod ini dengan betul menetapkan lebar maksimum imej kepada 100% daripada sel yang mengandungi. Walau bagaimanapun, dalam Firefox dan Opera, gaya lebar maksimum diabaikan.

Mengapa Percanggahan?

Spesifikasi World Wide Web Consortium (W3C) menyatakan bahawa max- lebar tidak digunakan pada elemen sebaris. Elemen sebaris, seperti imej, tidak mempunyai lebar atau ketinggian intrinsik, dan dimensinya biasanya ditentukan oleh kandungan yang terkandung di dalamnya.

Dalam contoh yang disediakan, teg imej ialah elemen sebaris dalam sel jadual. Oleh itu, gaya lebar maksimum tidak mempunyai kesan.

Penyelesaian yang Berfungsi

Untuk menyelesaikan isu ini dan memastikan keserasian merentas penyemak imbas, anda boleh menggunakan pendekatan berikut :

1. Balut div sel jadual dalam div lain dengan paparan: jadual dan susun atur jadual: tetap.
2. Ini memaksa Firefox dan Opera menggunakan peraturan lebar maksimum pada imej dalam sel jadual.

HTML dan CSS yang dikemas kini:

<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>Content</p>
  </div>
</div></code>

Dengan melaksanakan penyelesaian ini, anda boleh mengekalkan tingkah laku yang diingini dalam semua penyemak imbas utama.

Atas ialah kandungan terperinci Mengapakah `lebar maksimum` Berkelakuan Berbeza dalam Firefox dan Opera untuk Imej dalam Sel Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!