為什麼 Firefox 隱藏滾動溢出容器上的填充，我們如何修復它？

為什麼 Firefox 在滾動溢出容器上隱藏 Padding？

當使用 Overflow:scroll 屬性與元素上的 padding 結合使用時，Firefox 與其他瀏覽器有所不同。在 Firefox 中，元素底部的填滿消失，導致渲染出現差異。

識別問題

考慮以下代碼：

<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>

在Chrome 和Safari 中，容器的底部填充正確顯示，但在Firefox 中，它消失了。

解決問題

與其他開發人員合作後，我們找到了使用純CSS 的解決方法：

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

這會在容器後面添加一個空元素，有效地複製缺少的填充。

示範

嘗試下面的小提琴以查看實際的解決方案：

[Fiddle]()

結論

雖然不是理想的解決方案，但此解決方法解決了Firefox 使用溢出時底部填充消失的問題：滾動。

以上是為什麼 Firefox 隱藏滾動溢出容器上的填充，我們如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！