Mengapa Firefox Mengetepikan Padding di Bahagian Bawah Elemen dengan Limpahan: Tatal?

Menyelesaikan masalah Kelalaian Padding Firefox dengan Limpahan

Apabila melaksanakan kedua-dua limpahan: tatal dan padding sifat CSS, pengguna mungkin menghadapi isu di mana Firefox menyekat pelapik di bahagian bawah elemen, tidak seperti penyemak imbas seperti Chrome dan Safari.

Senario Masalah:

`

< ;ul>

<li>padding above first line in every Browser</li>
<li>content</li>
<li>content</li>
...
<li>content</li>
<li>content</li>
<li>content</li>
<li>no padding after last line in Firefox</li>

`

Dalam coretan ini, elemen mempunyai ketinggian 100px, padding 50px, a sempadan merah, dan limpahan tatal menegak. Walau bagaimanapun, dalam Firefox, pelapik di bahagian bawah bekas hilang, mewujudkan penampilan yang tidak dijangka.

Penyelesaian:

Walaupun isu ini mungkin kelihatan membingungkan, agak penyelesaian CSS tulen yang mudah boleh menyelesaikannya:

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

Dengan menambahkan peraturan CSS ini, anda memasukkan elemen kosong dengan ketinggian yang sama dengan pelapik bekas. Elemen ini berfungsi sebagai pemegang tempat, memastikan pelapik dikekalkan secara konsisten walaupun dengan limpahan tatal.

Demonstrasi:

[Fiddle](https://jsfiddle.net /rdx8k4mz/) mempamerkan penyelesaiannya.

Atas ialah kandungan terperinci Mengapa Firefox Mengetepikan Padding di Bahagian Bawah Elemen dengan Limpahan: Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!