Mengapa Kanak-kanak `display: table-cell` Saya Abaikan `height: 100%` dalam Internet Explorer?

Paparan IE: sel meja Kanak-kanak Abaikan ketinggian: 100%

Masalah:

Semasa menggunakan CSS untuk mencipta susun atur jadual secara dinamik, div dengan paparan: sel jadual mengabaikan ketinggian: 100% harta dalam Internet Explorer 8 dan mungkin versi yang lebih baru.

Jawapan:

Penafian: Isu ini wujud akibat kekurangan spesifikasi yang jelas untuk peratusan ketinggian dalam paparan: baris jadual dan paparan: elemen sel jadual.

Malangnya, Spesifikasi W3C tidak mentakrifkan bagaimana peratusan ketinggian harus ditafsirkan dalam elemen ini, menyerahkannya kepada pelaksanaan penyemak imbas. Akibatnya, sesetengah penyemak imbas, termasuk Internet Explorer versi 8 hingga 11, mungkin tidak konsisten mengendalikan peratusan ketinggian dalam reka letak jadual.

Mungkin Penyelesaian:

• Elakkan ketinggian peratusan: Gunakan ketinggian tetap atau mutlak untuk jadual sel.
• Gunakan kaedah reka letak jadual yang berbeza: Pertimbangkan untuk menggunakan Grid CSS, Flexbox atau gabungan kedua-duanya untuk mengelakkan isu ini dalam IE.
• Gunakan JavaScript: Gunakan JavaScript untuk menetapkan ketinggian sel jadual secara dinamik.
• Leverage a Prapemproses CSS: Gunakan prapemproses CSS seperti Sass atau Less untuk mengira dan menentukan nilai piksel untuk ketinggian sel jadual.

Nota:

Ia penting untuk diingat bahawa penyelesaian CSS tulen mungkin tidak boleh dilaksanakan jika anda perlu menyokong Internet Explorer 8 dan versi yang lebih baru, kerana tingkah laku itu tidak konsisten merentas penyemak imbas tersebut.

Atas ialah kandungan terperinci Mengapa Kanak-kanak `display: table-cell` Saya Abaikan `height: 100%` dalam Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!