Question

使用overflow: scroll结合padding: /* ... */ CSS属性时，Firefox中缺少元素底部的填充。（但适用于Chrome和Safari。）

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

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

Answer 1

在与开发人员进行了一些头脑风暴之后，虽然不是很优雅，但这个纯粹的css解决方案有效：

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

Fiddle

Answer 2

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

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

也许在真正发生的事情之间存在技术差异，但我发现这非常有效。

这是Fiddle

Answer 3

我认为@-moz-document url-prefix()是可行的解决方案。

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

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

@-moz-document url-prefix() {
  .container > :last-child {
    margin-bottom: 50px;
  }
}

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

Answer 4

您无法在所有情况下使用Arthurion的答案，例如关注input或img元素。您可以改为创建一个间隔元素，例如div，并将其放在滚动内容的末尾：

.spacer-1rem {
    content: "";
    height: 1rem;
    display: block;
}

Answer 5

尽管对我有用的与其他建议的答案相似，但这些其他答案对我却不起作用。

工作原理如下：

.container::after {
    content: '';
    display: block;
    padding: calc(var(--desiredPadding) / 2);
}

这意味着：

对我来说，有必要在伪元素上使用padding。使用padding-bottom无效，height
因此，我需要将填充除以2，
必须指定display: block

Answer 6

您可以定位Firefox浏览器，并为要滚动的元素添加额外的边距：

@supports (-moz-appearance:none) {

  ul {
    margin-bottom: 50px;
  }
}

来自MDN：

通过@supports CSS规则，您可以指定依赖于浏览器对一个或多个特定CSS功能的支持的声明。

通过请求支持特定于Firefox的规则，您可以有效地定位Firefox浏览器。

Answer 7

好吧，我更改了透明颜色边框的填充。由于我使用box-sizing: border box，所以不会误导宽度和高度问题

使用overflow时，Firefox会忽略填充：滚动

7 个答案:

Fiddle