Mengapa Firefox Menyembunyikan Padding pada Bekas Limpahan Tatal, dan Bagaimana Kami Boleh Membetulkannya?

Mengapa Firefox Menyembunyikan Padding pada Bekas Limpahan Tatal?

Firefox menyimpang daripada penyemak imbas lain apabila menggunakan limpahan: sifat tatal digabungkan dengan padding pada elemen. Dalam Firefox, padding di bahagian bawah elemen hilang, mewujudkan percanggahan dalam pemaparan.

Mengenal pasti Isu

Pertimbangkan kod berikut:

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

<code class="html"><div class="container">
  <ul>
    <!-- ... list items ... -->
  </ul>
</div></code>

Dalam Chrome dan Safari, pelapik bawah bekas dipaparkan dengan betul, tetapi dalam Firefox, ia hilang.

Menyelesaikan Isu

Selepas bekerjasama dengan pembangun lain, kami menemui penyelesaian menggunakan CSS tulen:

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

Ini menambah elemen kosong selepas bekas, dengan berkesan mereplikasi padding yang hilang.

Demonstrasi

Cuba biola di bawah untuk melihat penyelesaiannya dalam tindakan:

[Fiddle]()

Kesimpulan

Walaupun bukan penyelesaian yang ideal, penyelesaian ini menangani isu hilangnya pelapik bawah dalam Firefox apabila menggunakan limpahan: tatal.

Atas ialah kandungan terperinci Mengapa Firefox Menyembunyikan Padding pada Bekas Limpahan Tatal, dan Bagaimana Kami Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!