Firefox 在使用溢出时忽略填充:滚动 [英] Firefox ignores padding when using overflow:scroll

问题描述

当使用 overflow: scroll 和 padding:/* ... */ CSS 属性时，元素底部的填充在 Firefox 中丢失.(但适用于 Chrome 和 Safari.)

.container {高度:100px；填充:50px；边框:实心 1px 红色；溢出-y:滚动；}呃，李{填充:0；边距:0；}

<ul><li>在每个浏览器的第一行上方填充</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>在 Firefox 中的最后一行之后没有填充

查看演示

我是否遗漏了什么，或者是否有任何解决此问题的方法?

<小时>

注意:演示没有使用任何库进行规范化，但我也尝试了 normalize.css，但没有成功.

解决方案

在 Firefox 中 padding-bottom 被overflow:auto 忽略或溢出:滚动，请参阅文档

https://bugzilla.mozilla.org/show_bug.cgi?id=748518

仍然如果您想解决您的示例以实现所需的结果，请参阅小提琴:https://jsfiddle.net/nileshmahaja/4vuaf4o3/1/

修改后的 CSS

.container {高度:200px；填充:50px 50px 0;边框:实心 1px 红色；溢出-y:自动；显示:块；}ul{填充:0 0 50px；显示:块}李{填充:0；边距:0；}

When using overflow: scroll combined with padding: /* ... */ CSS property, the padding at the bottom of the element is missing in Firefox. (But works in Chrome and Safari.)

.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}

ul,
li {
  padding: 0;
  margin: 0;
}

<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>

View Demo

Did I missed something or is there any kind of work around for this issue?

---

Notice: the demo doesn't use any library for normalizing, but I tried normalize.css too, but without success.

解决方案

in Firefox padding-bottom is ignored with overflow:auto or overflow:scroll, see the documentation

https://bugzilla.mozilla.org/show_bug.cgi?id=748518

still if you want to work around your example to achieve the desired result then see the fiddle: https://jsfiddle.net/nileshmahaja/4vuaf4o3/1/

Modified CSS

.container {
    height: 200px;
    padding: 50px 50px 0;
    border: solid 1px red;
    overflow-y:auto;
    display:block;
}
ul{
    padding:0 0 50px;
    display:block
}
li {
    padding: 0;
    margin: 0;
}

这篇关于Firefox 在使用溢出时忽略填充:滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！