Mengapa Chrome dan Firefox Membuat Ketinggian Elemen Sekat Berbeza?

Heights Rendering Berbeza dalam Chrome dan Firefox

Apabila menetapkan ketinggian elemen tahap blok kepada auto atau 0~100% tanpa menyatakan secara jelas sifat ketinggian ibu bapa, ketinggian yang dikira dalam Chrome boleh berbeza daripada Firefox, terutamanya apabila elemen mempunyai margin bawah.

Mengapa Perbezaan?

Spesifikasi W3C CSS2.1 menyatakan bahawa ketinggian: 1% harus dikira secara automatik jika ketinggian blok yang mengandungi tidak dinyatakan secara eksplisit. Walau bagaimanapun, Chrome mematuhi tafsiran yang lebih tradisional, yang memerlukan sifat ketinggian yang ditetapkan pada induk untuk peratusan ketinggian berfungsi pada elemen kanak-kanak.

Sebaliknya, Firefox dan IE, baru-baru ini telah meluaskan tafsiran mereka untuk menerima flex ketinggian sebagai rujukan untuk peratusan ketinggian. Penyimpangan daripada tafsiran tradisional ini telah menyebabkan perbezaan pemaparan dalam penyemak imbas.

Penyelesaian Alternatif

Untuk mencapai gelagat yang diingini dalam Chrome dan Firefox, pertimbangkan alternatif ini:

• Gunakan paparan: lenturkan kepada ibu bapa, yang menetapkan item penjajaran: regangan dan memaksa kanak-kanak untuk mengembangkan kepada ibu bapa ketinggian penuh.
• Gunakan kedudukan: relatif pada induk dan kedudukan: mutlak; ketinggian: 100%; lebar: 100% pada kanak-kanak. Kaedah ini mengatasi isu peratusan ketinggian dalam Chrome.

Atas ialah kandungan terperinci Mengapa Chrome dan Firefox Membuat Ketinggian Elemen Sekat Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!