Mengapa pelapik bawah saya hilang dalam Firefox apabila menggunakan limpahan: tatal?

Isu Padding dalam Firefox dengan Limpahan: Tatal

Apabila melaksanakan elemen boleh tatal menggunakan limpahan: tatal, anda mungkin menghadapi isu dalam Firefox di mana pelapik bawah elemen diabaikan. Ini diperhatikan walaupun padding berfungsi dengan betul dalam Chrome dan Safari.

Senario khusus melibatkan penggunaan sifat CSS seperti padding: /* ... */ dan overflow-y: tatal ke elemen. Dalam Firefox, padding di bahagian bawah elemen tiada.

Penyelesaian

Walaupun isu ini mungkin kelihatan seperti pepijat dalam Firefox, penyelesaian wujud menggunakan CSS . Dengan menambahkan gaya berikut pada elemen yang terjejas, isu pelapik bawah boleh diselesaikan:

.container:after {
    content: "";
    height: 50px;
    display: block;
}

CSS ini mencipta elemen kosong selepas bekas boleh tatal, dengan berkesan menyediakan pelapik bawah yang diingini. Nilai ketinggian boleh dilaraskan agar sepadan dengan jumlah padding yang dikehendaki.

Pelaksanaan

Penyelesaian CSS yang disediakan boleh dilaksanakan dengan menambahkan kod berikut pada fail CSS anda:

.container:after {
    content: "";
    height: 50px;
    display: block;
}

CSS ini harus digunakan pada elemen yang dipengaruhi oleh isu tersebut.

Atas ialah kandungan terperinci Mengapa pelapik bawah saya hilang dalam Firefox apabila menggunakan limpahan: tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!