為什麼在 Firefox 中使用“overflow:scroll”時我的底部填充會消失？

Firefox 中的填充問題（溢出：滾動）

使用溢位：滾動實現可滾動元素時，您可能會在Firefox 中遇到以下問題：元素的底部填充將被忽略。儘管 padding 在 Chrome 和 Safari 中正常工作，但仍觀察到這種情況。

特定場景涉及套用 CSS 屬性，例如 padding: /* ... */ 和 Overflow-y: 捲動到元素。在 Firefox 中，元素底部的填滿缺失。

解決方案

雖然此問題在 Firefox 中可能看起來是一個錯誤，但存在使用 CSS 的解決方法。透過為受影響的元素添加以下樣式，可以解決底部填充問題：

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

此 CSS 在可捲動容器後面建立一個空元素，有效地提供所需的底部填充。可以調整高度值以符合所需的填充量。

實作

可以透過將以下程式碼加入CSS 檔案來實現提供的CSS 解決方案：

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

此CSS 應該應用於受問題影響的元素。

以上是為什麼在 Firefox 中使用“overflow:scroll”時我的底部填充會消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！