iOS 上 Safari 的奇怪边距底部行为答案

【问题标题】：Weird margin-bottom behavior with Safari on iOSiOS 上 Safari 的奇怪边距底部行为
【发布时间】：2018-08-15 15:28:00
【问题描述】：

我的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 按预期运行，那将不胜感激。

【问题讨论】：

【解决方案1】：

我在其他浏览器上也遇到过这种情况。 “如果没有什么可以反弹”，margin-bottom 似乎不起作用。

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

所以尝试添加：

#container {
  padding-bottom: 1px;
}

【讨论】：

【解决方案2】：

你可以使用这个来代替元素上的边距底部：

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

【讨论】：

【解决方案3】：

在 HTML 底部添加一个不间断空格对我有用：

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

【讨论】：