为什么 Firefox 在溢出时省略元素底部的填充：滚动？

排查 Firefox 因溢出而导致的 Padding 遗漏问题

同时实现溢出：滚动和 padding CSS 属性时，用户可能会遇到 Firefox 抑制填充的问题元素底部的内边距，与 Chrome 和 Safari 等浏览器不同。

问题场景：

`

< ;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>no padding after last line in Firefox</li>

`

在此代码段中，元素的高度为 100px，内边距为 50px，红色边框，垂直滚动溢出。然而，在 Firefox 中，容器底部的填充缺失，造成意外的外观。

解决方法：

虽然这个问题可能看起来令人困惑，但相对来说，简单的纯CSS解决方案可以解决它：

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

通过添加此CSS规则，您可以插入一个高度等于容器填充的空元素。该元素用作占位符，确保即使滚动溢出也能始终保持填充。

演示：

[Fiddle](https://jsfiddle.net /rdx8k4mz/) 展示解决方法。