在iOS上使用Safari的奇怪的边缘底部行为

Question

我的body（简化）

中有类似的内容

<div id="container">
  <article>
    text
  </article>
</div>

使用css

#container > article
  margin-bottom: 50px
  overflow: auto

article
  display: block

在所有浏览器上都会显示margin-bottom，但Safari似乎会将其折叠。

我读了很多关于这个问题的内容，但是overflow: auto没有立即帮助或任何其他技巧。

如果我将margin-bottom移动到css中的article定义，那么事情变得非常奇怪，在这种情况下，Safari会显示边距。

#container > article
  /* nothing remains here */

article
  display: block
  margin-bottom: 50px
  overflow: auto

这不是我想要的，因为它会影响所有 article代码。

如果有人能够解释我这一点，并且有一个解决方法来实际让Safari按预期运行，那将非常感激。

Answer 1

我也在其他浏览器上体验过这个。如果没有任何东西可以反弹，那么边缘底部似乎不起作用。

我的解决方案始终是向父元素添加一个小填充。然后边距在填充上反弹。

所以尝试添加：

#container {
  padding-bottom: 1px;
}

Answer 2

直接在元素上没有边距底部，你可以使用它：

#container > article:after {
height: 50px;
content: "";
position: absolute;
width: 100%;}

Answer 3

在HTML的底部添加一个不间断的空格对我来说很有效：

<div id="container">
    <article>
        text
    </article>
</div>
&nbsp;