为什么在 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中文网其他相关文章！