為什麼 Firefox 在使用 Overflow: Scroll 時會忽略填滿？

Firefox 在使用Overflow: Scroll 時忽略Padding

當使用Overflow:padding 樣式的捲動帶有paddingox 中出現了一個令人費解的問題：底部元素的填充消失。在直接填充和繼承填充場景中都會觀察到此行為。

原因：

問題的確切原因未知，但似乎源於 Firefox 的渲染行為在不考慮填充的情況下剪切溢出的內容。

解決方法：

為了彌補這種不一致，可以實現純CSS 解決方案：

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

說明：

此CSS 片段在容器後面加上一個空的偽元素。透過將其高度設定為與底部填充相同的值並將顯示設為阻止，它會建立一個不可見的緩衝區，強制 Firefox 尊重填充。

限制：

雖然此解決方法解決了該問題，但它確實引入了一個警告：

• 如果可滾動容器內的內容溢出超出容器的高度，則額外的偽元素高度將可見。

為了避免這種情況，您可以使用 JavaScript 根據溢出內容的高度動態調整偽元素的高度，確保其在容納內邊距的同時保持隱藏狀態。

以上是為什麼 Firefox 在使用 Overflow: Scroll 時會忽略填滿？的詳細內容。更多資訊請關注PHP中文網其他相關文章！