为什么 Firefox 隐藏滚动溢出容器上的填充，我们如何修复它？-css教程-PHP中文网

为什么 Firefox 隐藏滚动溢出容器上的填充，我们如何修复它？

Barbara Streisand

发布： 2024-10-26 03:36:27

原创

1109 人浏览过

Why Does Firefox Hide Padding on Scrolling Overflow Containers, and How Can We Fix It?

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