使用overflow时,Firefox会忽略填充:滚动

Question

当使用overflow: scroll联合padding: /* ... */CSS属性,在元件的底部的填充缺少在Firefox.(但适用于Chrome和Safari.)

查看演示

我是否遗漏了某些内容或是否有任何解决此问题的方法？

---

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

Answer 1

在与开发人员进行了一些头脑风暴之后,虽然不是很优雅,但这个纯粹的css解决方案可以工作:

.container:after {
    content: "";
    height: 50px;
    display: block;
}

小提琴

Answer 2

在Firefox中,padding-bottom会被overflow:auto或overflow:scroll忽略,请参阅文档

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

如果你想解决你的例子以达到预期的结果,那么看看小提琴: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;
}

Answer 3

我不喜欢创建其他DOM元素来解决问题，但是似乎可以将元素分成两个元素，例如：

<div class="container">
    <div class="container-inner">
        <!-- long content -->
    </div>
</div>

然后分配overflow: scroll给外部元素并添加padding: /* ... */到内部元素。

Answer 4

我最终以略有不同的方式实现了相同的效果（可滚动容器中的最后一项与容器末尾之间的空间）：

.container :last-child {
    margin-bottom: 50px;
}

也许实际情况之间存在技术差异，但我发现这非常有效。

这是一个小提琴