扩展firefox中的outter元素以包含内部元素

Question

我正在研究这个landing page，我对顶部的部分（黎明时有太阳的背景图片）感到有疑问。

在Chrome上，我设法将平板电脑图片放在背景部分中，但在Firefox上，背景部分不会自行扩展以包含平板电脑图片。

您对我该如何解决它有什么想法吗？

Answer 1

问题

保证金折叠意味着margin上的.container.content在技术上应该在父级之外，而不在内部，因为在margin-bottom上没有任何妨碍.container.content的问题}

背景图片未在边距上拉伸，因此折叠后的margin（现在.bg的{​​{1}}属性也会向上折叠.bg-color窥视页面的实际背景 - 你看到的奶油色。

另外，有趣的是，我很确定这意味着 Chrome正在渲染错误。 ^{Shots Fired}

有关保证金折叠的更多信息，请参阅MDN。

解决方案

最简单，只需更改当前：

margin-bottom

到

.guests_pages .bg .bg-color .container.content{
    margin:0 auto 10%;
}

Padding不会崩溃，所以它不能传递它，现在必须拉伸父级而不是让父级声明它自己。

Answer 2

我不完全确定原因，但我怀疑这与浏览器对:: previous和:: after选择器的解释方式略有不同有关。

一种解决方法是增加.bg选择器的最小高度，并将min-height添加到.bg-color选择器。我明白理解渲染差异的原因会更好，但这至少解决了通过Firebug手动调整CSS时的问题。