为什么在 Firefox 中使用“溢出：滚动”时底部填充会消失？

在 Firefox 中因溢出而忽略填充：滚动

在涉及 CSS 溢出：滚动属性和填充的某些场景中，Firefox 表现出一种特殊的行为，其中元素底部的填充消失。这与 Chrome 和 Safari 等浏览器中观察到的预期功能形成鲜明对比。

当您将 Overflow:scroll 属性与 padding 属性（定义元素的垂直滚动）结合使用时，就会出现问题。元素内容与其边框之间的间距。在 Firefox 中，元素底部的填充消失，留下可见内容超出定义的填充区域的边缘。

为了说明此问题，请考虑以下 CSS 代码：

<code class="css">.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}

ul,
li {
  padding: 0;
  margin: 0;
}</code>

当将此代码应用于如下所示的 HTML 结构时，您会注意到 Firefox 中元素底部缺少填充，而它在其他浏览器中按预期显示：

<code class="html"><div class="container">
  <ul>
    <li>padding above first line in every Browser</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>no padding after last line in Firefox</li>
  </ul>
</div></code>

[查看演示](演示 URL)

要解决这个问题，可以采用简单的纯 CSS 解决方案：

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

此 CSS 代码在容器元素后面添加一个具有固定高度的元素50px（相当于底部填充）。通过插入此元素，您可以创建一个可见的空间来弥补缺失的填充，从而有效地解决问题。

需要注意的是，此解决方案虽然有效，但并不是一个理想或优雅的解决方案。然而，它提供了一种解决方法，直到有更完善的解决方案可用。

以上是为什么在 Firefox 中使用“溢出：滚动”时底部填充会消失？的详细内容。更多信息请关注PHP中文网其他相关文章！