Mengapakah \"100% Ketinggian\" berkelakuan berbeza dalam Firefox dan Internet Explorer?

Memahami Isu "100% Ketinggian" dalam Firefox dan IE

Dalam pembangunan web, tetapkan ketinggian div kontena kepada 100% sering digunakan untuk memastikan kandungannya memenuhi sepenuhnya ruang menegak yang tersedia. Walau bagaimanapun, pengguna mungkin menghadapi percanggahan dalam tingkah laku gaya ini merentas pelayar yang berbeza, seperti Firefox dan Internet Explorer. Memahami sebab di sebalik perbezaan ini adalah penting untuk mencipta pengalaman merentas penyemak imbas yang konsisten.

Isu berlaku apabila div bekas mengandungi dua div dalaman, setiap satu ditetapkan kepada ketinggian 100%. Dalam Firefox, gaya ini berfungsi seperti yang diharapkan, menyebabkan div dalaman meregang ke ketinggian penuh bekas. Walau bagaimanapun, dalam Internet Explorer, div kekal terhad kepada ketinggian kandungan mereka.

Untuk menyelidiki punca kelakuan ini, kita mesti mempertimbangkan konsep "blok yang mengandungi" dalam CSS. Peratusan ketinggian elemen ditentukan secara relatif kepada ketinggian blok yang mengandunginya, iaitu elemen induk yang menetapkan konteks menegak elemen. Sekiranya tiada ketinggian yang dinyatakan secara jelas untuk blok yang mengandungi, ketinggiannya bergantung pada kandungannya.

Dalam coretan CSS yang disediakan, ketinggian #bekas bekas ditetapkan kepada "auto", yang tidak nyatakan ketinggian tetap dengan jelas. Akibatnya, dalam Firefox, ketinggian div dalaman dikira berdasarkan ketinggian auto bekas. Ini biasanya menghasilkan gelagat ketinggian 100% yang diingini.

Walau bagaimanapun, dalam Internet Explorer, pemaparan mod quirks mungkin mengatasi gelagat ini dan mengira ketinggian div dalaman berdasarkan ketinggian kandungannya. Akibatnya, div kekal terhad kepada ketinggian kandungan teks mereka dan bukannya menduduki ketinggian bekas sepenuhnya.

Untuk memastikan keserasian merentas penyemak imbas yang konsisten, adalah penting untuk menentukan ketinggian blok yang mengandungi secara eksplisit, dalam ini bekas #bekas. Dengan menetapkan #container kepada ketinggian 100%, ketinggian div dalaman kini akan dikira secara relatif kepada ketinggian tetap bekas mereka, menghasilkan gelagat yang diingini dalam kedua-dua Firefox dan Internet Explorer.

Selain itu, ia adalah perlu diingat bahawa dalam CSS, "blok yang mengandungi" awal adalah "bergantung kepada UA", bermakna ia berbeza-beza bergantung pada pelaksanaan penyemak imbas. Untuk mewujudkan titik rujukan yang konsisten, ketinggian HTML dan elemen badan juga harus ditetapkan secara eksplisit kepada 100%.

Dengan mengikuti garis panduan ini, pembangun web boleh memastikan bahawa reka bentuk mereka berkelakuan seperti yang dimaksudkan dalam pelbagai penyemak imbas, menyediakan pengguna dengan pengalaman yang lancar tanpa mengira pilihan penyemak imbas mereka.

Atas ialah kandungan terperinci Mengapakah \"100% Ketinggian\" berkelakuan berbeza dalam Firefox dan Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!