为什么 Firefox 在使用 Overflow: Scroll 时会忽略填充？

Firefox 在使用 Overflow: Scroll 时忽略 Padding

当使用 Overflow:带有 padding 样式的滚动时，Firefox 中出现了一个令人费解的问题：底部元素的填充消失。在直接填充和继承填充场景中都会观察到此行为。

原因：

问题的确切原因未知，但似乎源于 Firefox 的渲染行为在不考虑填充的情况下剪切溢出的内容。

解决方法：

为了弥补这种不一致，可以实现纯 CSS 解决方案：

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

说明：

此 CSS 片段在容器后面添加一个空的伪元素。通过将其高度设置为与底部填充相同的值并将显示设置为阻止，它会创建一个不可见的缓冲区，强制 Firefox 尊重填充。

限制：

虽然此解决方法解决了该问题，但它确实引入了一个警告：

• 如果可滚动容器内的内容溢出超出容器的高度，则额外的伪元素高度将可见。

为了避免这种情况，您可以使用 JavaScript 根据溢出内容的高度动态调整伪元素的高度，确保其在容纳内边距的同时保持隐藏状态。

以上是为什么 Firefox 在使用 Overflow: Scroll 时会忽略填充？的详细内容。更多信息请关注PHP中文网其他相关文章！