Mengapakah `max-width` Mengabaikan Imej Di Dalam `display: table-cell` dalam Firefox dan Opera?

Ketidakkonsistenan Penyemak Imbas dengan paparan Dalam lebar maksimum: sel jadual

Dalam keadaan tertentu, sifat gaya lebar maksimum diabaikan dalam paparan : elemen sel jadual dalam Firefox dan Opera, walaupun ia dipaparkan dengan betul dalam Chrome dan IE. Ketidakkonsistenan ini menimbulkan persoalan tentang puncanya dan penyelesaian yang paling sesuai.

Punca

Menurut spesifikasi W3C, lebar maks tidak digunakan pada elemen sebaris. Walau bagaimanapun, imej dalam paparan: sel jadual dianggap seperti blok dalam kebanyakan penyemak imbas, manakala Firefox dan Opera menganggapnya sebagai sebaris. Perbezaan dalam tafsiran ini mengakibatkan tingkah laku yang tidak konsisten.

Penyelesaian

Satu penyelesaian ialah meletakkan paparan: div pembalut sel jadual di dalam div lain dengan paparan: jadual dan susun atur jadual: tetap. Ini memaksa Firefox dan Opera untuk menghormati peraturan lebar maks.

Contoh

<code class="html"><div style="display: table">
  <div style="display: table-cell; padding: 15px; width: 200px">
    <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy"   style="max-width:90%" alt="Mengapakah `max-width` Mengabaikan Imej Di Dalam `display: table-cell` dalam Firefox dan Opera?" >
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </p>
  </div>
</div></code>

Pengesyoran

Yang paling banyak pendekatan yang mematuhi piawaian adalah untuk mengelak daripada menggunakan lebar maksimum pada elemen sebaris, termasuk imej dalam paparan: sel jadual. Sebaliknya, gunakan kaedah alternatif untuk mengawal lebar elemen tersebut.

Atas ialah kandungan terperinci Mengapakah `max-width` Mengabaikan Imej Di Dalam `display: table-cell` dalam Firefox dan Opera?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!