Mengapa Firefox Mengabaikan Padding Apabila Menggunakan Limpahan: Tatal?

Firefox Mengabaikan Padding Apabila Menggunakan Limpahan: Tatal

Apabila menggunakan limpahan: tatal dengan gaya padding, isu yang membingungkan timbul dalam Firefox: bahagian bawah padding elemen hilang. Tingkah laku ini diperhatikan dalam kedua-dua senario padding secara langsung dan diwarisi.

Punca:

Punca sebenar isu ini tidak diketahui, tetapi ia nampaknya berpunca daripada gelagat pemaparan Firefox di mana kandungan yang melimpah dipotong tanpa mengambil kira padding.

Penyelesaian:

Untuk mengimbangi ketidakkonsistenan ini, penyelesaian CSS tulen boleh dilaksanakan:

<code class="css">.container:after {
    content: "";
    height: 50px;
    display: block;
}</code>

Penjelasan:

Coretan CSS ini menambah elemen pseudo kosong selepas bekas. Dengan menetapkan ketinggiannya kepada nilai yang sama seperti pelapik bawah dan menetapkan paparan untuk menyekat, ia mewujudkan penimbal yang tidak kelihatan yang memaksa Firefox untuk menghormati pelapik.

Penghadan:

Sementara penyelesaian ini menyelesaikan isu, ia memperkenalkan kaveat:

• Jika kandungan dalam bekas boleh tatal melimpah melebihi ketinggian bekas, ketinggian unsur pseudo tambahan akan kelihatan.

Untuk mengelakkan perkara ini, anda boleh menggunakan JavaScript untuk melaraskan ketinggian unsur pseudo secara dinamik berdasarkan ketinggian kandungan yang melimpah, memastikan ia kekal tersembunyi semasa memuatkan pelapik.

Atas ialah kandungan terperinci Mengapa Firefox Mengabaikan Padding Apabila Menggunakan Limpahan: Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!