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

问题描述

结合使用overflow: scroll和padding: /* ... */ CSS属性时，Firefox中缺少元素底部的填充. (但可在Chrome和Safari中使用.)

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>

观看演示

我错过了什么吗?还是可以解决这个问题?

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

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

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

推荐答案

Firefox padding-bottom中的

会被overflow:auto或忽略 溢出:滚动，请参阅文档

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

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

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

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

修改后的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屋！