Mengapa Padding Bawah Hilang dalam Firefox Apabila Menggunakan Limpahan: Tatal?

Padding Diabaikan dalam Firefox dengan Overflow: Scroll

Dalam senario tertentu yang melibatkan limpahan CSS: scroll property dan padding, Firefox mempamerkan tingkah laku yang pelik di mana pelapik di bahagian bawah unsur hilang. Ini berbeza dengan kefungsian yang dijangka diperhatikan dalam penyemak imbas seperti Chrome dan Safari.

Isu timbul apabila anda menggabungkan limpahan: sifat tatal, yang membolehkan tatal menegak untuk elemen, dengan sifat padding, yang mentakrifkan jarak antara kandungan elemen dan sempadannya. Dalam Firefox, padding di bahagian bawah elemen hilang, meninggalkan kandungan yang boleh dilihat melangkaui pinggir kawasan padding yang ditentukan.

Untuk menggambarkan isu ini, pertimbangkan kod CSS berikut:

<code class="css">.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}

ul,
li {
  padding: 0;
  margin: 0;
}</code>

Apabila kod ini digunakan pada struktur HTML seperti di bawah, anda akan melihat padding yang hilang di bahagian bawah elemen dalam Firefox, sementara ia muncul seperti yang diharapkan dalam pelayar lain:

<code class="html"><div class="container">
  <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>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</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>
  </ul>
</div></code>

[ Lihat Demo](URL demo)

Untuk menangani isu ini, penyelesaian CSS tulen yang mudah boleh digunakan:

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

Kod CSS ini menambah elemen selepas elemen bekas dengan ketinggian tetap sebanyak 50px (bersamaan dengan padding bawah). Dengan memasukkan elemen ini, anda mencipta ruang yang boleh dilihat yang menggantikan padding yang hilang, menyelesaikan masalah dengan berkesan.

Perlu ambil perhatian bahawa penyelesaian ini, walaupun berfungsi, bukanlah penyelesaian yang ideal atau elegan. Walau bagaimanapun, ia menyediakan penyelesaian sehingga penyelesaian yang lebih halus tersedia.

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