Rumah >hujung hadapan web >tutorial css >Mengapa Chrome dan Firefox Memaparkan Ketinggian Berbeza untuk Peratusan dan Nilai 'Auto'?
Mengapa Chrome dan Firefox Memaparkan Ketinggian Berbeza untuk Peratusan dan Nilai 'Auto'?
- Barbara Streisandasal
- 2024-12-22 16:05:11320semak imbas
Rendering Heights Berbeza dalam Chrome dan Firefox
Dalam CSS, menetapkan ketinggian elemen peringkat blok kepada peratusan atau "auto" tanpa menyatakan ketinggian elemen induk boleh membawa kepada pengiraan ketinggian yang berbeza-beza merentas pelayar. Chrome dan Firefox, misalnya, mempamerkan gelagat yang berbeza.
Mengapa "ketinggian: 1%" Dikira kepada Auto
Dalam contoh anda dengan ketinggian: 1%, Chrome mengira ketinggian div sebagai margin-bawah ditambah ketinggian kandungan unsur p. Ini kerana, mengikut spesifikasi CSS, apabila ketinggian ibu bapa tidak ditetapkan secara eksplisit dan elemen tidak diletakkan secara mutlak, "auto" dikira untuk peratusan.
Ketinggian Fleksibel Ibu Bapa
Satu lagi percanggahan antara Chrome dan Firefox ialah pengendalian ketinggian peratusan mereka dalam flexbox. Chrome dan Safari mengutamakan ketinggian fleksibel ibu bapa, manakala Firefox dan IE11/Edge mengutamakan ketinggian keseluruhan ibu bapa.
Tafsiran Penyemak Imbas
Bahasa spesifikasi CSS berkenaan peratusan ketinggian agak kabur, memberi ruang untuk tafsiran oleh pembuat pelayar. Tafsiran tradisional memerlukan nilai ketinggian yang ditetapkan pada induk, yang diikuti oleh penyemak imbas seperti Chrome dan Safari. Walau bagaimanapun, Firefox dan IE telah mengembangkan tafsiran ini untuk memasukkan ketinggian fleksibel.
Penyelesaian Alternatif
Untuk memastikan pemaparan ketinggian yang konsisten merentas penyemak imbas, pertimbangkan alternatif ini:
- Gunakan paparan: lentur pada ibu bapa dan selaraskan item: regangkan pada kanak-kanak untuk menetapkan ketinggian kanak-kanak kepada ibu bapa penuh ketinggian.
- Gunakan kedudukan: mutlak dengan ketinggian: 100% dan lebar: 100% pada kanak-kanak sambil menetapkan kedudukan: relatif pada ibu bapa.
Atas ialah kandungan terperinci Mengapa Chrome dan Firefox Memaparkan Ketinggian Berbeza untuk Peratusan dan Nilai 'Auto'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!