Mengapa Chrome dan Firefox Memberikan Ketinggian Peratusan Berbeza pada Elemen Tahap Blok?

Heights Rendering Berbeza dalam Chrome dan Firefox

Soalan:

Apabila menetapkan ketinggian elemen peringkat blok kepada peratusan (mis., 1%) tanpa menetapkan ketinggian induknya secara eksplisit, mengapa Chrome dan Firefox mengira ketinggian berbeza, dengan Chrome mempertimbangkan margin bawah kanak-kanak dan Firefox tidak?

Jawapan:

Piawaian CSS menyatakan bahawa jika ketinggian blok yang mengandungi tidak dinyatakan secara eksplisit, peratusan ketinggian dikira kepada "auto."

Walau bagaimanapun, penyemak imbas yang berbeza telah melaksanakan peruntukan ini secara berbeza:

• Pelayar webkit (Chrome, Safari) mematuhi tafsiran tradisional, yang memerlukan ibu bapa menetapkan ketinggian untuk peratusan ketinggian untuk berfungsi pada anak aliran masuk.
• Firefox dan IE telah meluaskan tafsiran mereka untuk menerima ketinggian lentur sebagai baik.

Penyimpangan daripada spesifikasi ini telah menyebabkan ketidakkonsistenan pemaparan, dengan sesetengah penyemak imbas menggunakan ketinggian fleksibel dan yang lain memerlukan ketinggian induk yang ditetapkan.

Penyelesaian Alternatif:

Untuk memastikan pemaparan yang konsisten dalam semua penyemak imbas, pertimbangkan untuk menggunakan salah satu daripada yang berikut alternatif:

• Tetapkan paparan ibu bapa kepada "flex" untuk mendayakan ketinggian penuh secara automatik untuk kanak-kanak menggunakan item align-item: regangan.
• Gunakan kedudukan : mutlak dan kedudukan: relatif pada elemen ibu bapa dan anak, masing-masing, dengan kanak-kanak itu mempunyai ketinggian: 100%; lebar: 100%. Ini membolehkan peratusan ketinggian berfungsi pada elemen kanak-kanak walaupun tanpa ketinggian ibu bapa yang ditentukan.

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