Mengapa Chrome dan Firefox Berbeza dalam Mengira Ketinggian untuk Elemen Tahap Blok dengan Ketinggian Peratusan?

Memaparkan Perbezaan dalam Chrome dan Firefox untuk Ketinggian

Isu

Menetapkan ketinggian elemen peringkat blok kepada "auto" atau "0~100% " tanpa menyatakan ketinggian ibu bapa secara eksplisit menghasilkan pengiraan ketinggian yang berbeza dalam Chrome dan Firefox. Dalam kes "ketinggian: 1%," Chrome mengira ketinggian sebagai margin bawah ditambah ketinggian kandungan, manakala Firefox tidak. Tingkah laku ini berbeza walaupun spesifikasi CSS menyatakan bahawa "ketinggian: 1%" harus dikira sebagai "auto" apabila ketinggian ibu bapa tidak ditetapkan secara eksplisit.

Sebab

Sedangkan W3C menyediakan piawaian untuk pelayar, pembuat pelayar mempunyai kebebasan untuk melaksanakan piawaian ini secara berbeza. Dalam kes ini, Chrome dan Firefox mentafsir sifat "ketinggian" secara berbeza.

Chrome mengikut tafsiran spesifikasi yang lebih tradisional, memerlukan set ketinggian pada induk untuk peratusan ketinggian untuk berfungsi pada elemen anak. Firefox dan IE baru-baru ini telah meluaskan tafsiran mereka untuk menerima ketinggian fleksibel juga.

Penyelesaian Alternatif

Untuk menangani ketidakkonsistenan ini, pertimbangkan untuk menggunakan salah satu alternatif ini:

• Display Flex: Tetapkan "display: flex" pada induk, yang secara automatik menetapkan "align-item: stretch" dan kembangkan kanak-kanak ke ketinggian penuh ibu bapa.
• Kedudukan Mutlak: Tetapkan "kedudukan: relatif" pada ibu bapa dan "kedudukan: mutlak; ketinggian : 100%; lebar: 100%" pada kanak-kanak. Ini membolehkan peratusan ketinggian digunakan tanpa ketinggian tertentu pada induk.

Atas ialah kandungan terperinci Mengapa Chrome dan Firefox Berbeza dalam Mengira Ketinggian untuk Elemen Tahap Blok dengan Ketinggian Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!