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

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

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

所以尝试添加:

#container {
  padding-bottom: 1px;
}