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