Mengapa Div Heights Membuat Berbeza dalam Firefox dan Internet Explorer?

Anomali Rendering Ketinggian Div IE

Dalam pembangunan web, adalah perkara biasa untuk menghadapi masalah keserasian merentas penyemak imbas. Satu isu sedemikian ialah percanggahan dalam pemaparan ketinggian div antara Firefox dan Internet Explorer.

Masalahnya:

Dalam kes ini, div kontena mempunyai dua div anak yang sepatutnya idealnya menempati 100% lebar dan tinggi dalam bekas. Dalam Firefox, ini berfungsi seperti yang diharapkan. Walau bagaimanapun, dalam IE, div hanya memanjang ke ketinggian kandungannya, meninggalkan ruang kosong di atasnya.

Punca Punca:

Perbezaan utama terletak pada berapa peratusan -berasaskan ketinggian dikira. Dalam Firefox, peratusan adalah relatif kepada ketinggian viewport. Walau bagaimanapun, dalam IE, ia adalah relatif kepada ketinggian blok yang mengandungi, iaitu div kontena dalam kes ini.

Penyelesaian:

Untuk menyelesaikan isu ini, ia adalah diperlukan untuk menentukan ketinggian div kontena secara eksplisit. Selain itu, memandangkan blok yang mengandungi boleh menjadi unsur nenek moyang, anda dinasihatkan untuk menetapkan ketinggian dan elemen kepada 100% juga. Ini memastikan bahawa ketinggian div bekas boleh dikira dengan betul.

Dalam kod CSS yang disemak di bawah, ketinggian ditetapkan kepada 100% dan ketinggian dan juga dinyatakan:

<code class="css">html, body { height: 100%; }
#container { height: 100%; }
#container #mainContentsWrapper { height: 100%; }
#container #sidebarWrapper { height: 100%; }</code>

Atas ialah kandungan terperinci Mengapa Div Heights Membuat Berbeza dalam Firefox dan Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!