Mengapakah `max-width: 100%` pada imej di dalam sel jadual berkelakuan berbeza dalam Firefox dan Opera berbanding Chrome dan IE?

Percanggahan dalam Gelagat Harta Lebar Maks dalam Firefox dan Opera

Dalam senario tertentu, penyemak imbas Firefox dan Opera menunjukkan percanggahan berbanding Chrome dan IE dalam mentafsir maks CSS -sifat lebar. Khususnya, apabila imej diletakkan dalam sel jadual (paparan: sel jadual) dan ditetapkan lebar maksimum: 100%, lebar imej diabaikan dalam Firefox dan Opera, manakala ia dikekang dengan betul dalam penyemak imbas lain.

Untuk memahami sebab di sebalik tingkah laku ini, adalah penting untuk ambil perhatian bahawa sifat lebar maksimum CSS ditakrifkan dalam spesifikasi W3C untuk digunakan hanya pada elemen peringkat blok. Elemen sebaris, seperti , tidak terjejas oleh sifat ini. Dalam HTML yang disediakan, elemen ditetapkan untuk dipaparkan: sebaris secara lalai, yang menerangkan sebab Firefox dan Opera mengabaikan penggayaan lebar maksimum.

Penyelesaian:

Untuk menyelesaikan isu ini dan menguatkuasakan lebar imej yang dimaksudkan, adalah perlu untuk menetapkan elemen untuk dipaparkan: sekat dalam gaya CSS. Walau bagaimanapun, menggunakan penyelesaian ini boleh mengubah reka letak dan pemformatan halaman.

Penyelesaian Patuh:

Penyelesaian yang mematuhi piawaian ialah meletakkan sel jadual (paparan: sel jadual) dalam div pembalut yang ditetapkan untuk memaparkan: jadual dan susun atur jadual: tetap. Pendekatan ini memastikan bahawa semua elemen anak dalam jadual mematuhi kekangan lebar yang ditentukan, termasuk elemen dengan lebar maksimum: 100%.

Pendekatan Alternatif:

Pilihan lain ialah menggunakan JavaScript untuk mengesan sokongan penyemak imbas untuk lebar maksimum dalam paparan: elemen sel jadual. Jika penyemak imbas tidak menyokong tingkah laku ini secara asli, strategi reka letak alternatif boleh dilaksanakan menggunakan JavaScript.

Contoh Kod:

<code class="HTML"><div style="display: table;">
    <div style="display: table-cell; padding: 15px; width: 200px;">
        <img src="..." style="display: block; max-width: 100%" />
        <p>Text content...</p>
    </div>
</div></code>

Atas ialah kandungan terperinci Mengapakah `max-width: 100%` pada imej di dalam sel jadual berkelakuan berbeza dalam Firefox dan Opera berbanding Chrome dan IE?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!