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中文网其他相关文章!