在 iOS 上使用 Safari 出现奇怪的页边距底部行为

Question

我的body（简化版）中有这样的东西

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

用 css

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

article
  display: block

在所有浏览器上都会显示边距底部，但 Safari 似乎将其折叠。

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

事情变得真正奇怪的地方是，如果我将 移动margin-bottom到articlecss 中的定义，在这种情况下，Safari 会显示边距..

#container > article
  /* nothing remains here */

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

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

如果有人可以向我解释这一点，并有一个解决方法使 Safari 真正按预期运行，那将不胜感激。

Answer 1

我在其他浏览器上也遇到过这种情况。似乎保证金底部不起作用“如果没有任何东西可以反弹”。

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

所以尝试添加：

#container {
  padding-bottom: 1px;
}