css - 在Firefox中扩展外部元素以包括内部元素

我正在对此landing page进行操作，但顶部的部分存在问题（背景图片带有黎明的太阳）

在Chrome上，我设法将平板电脑图像放置在背景部分内，但在Firefox上，背景部分并未扩展为包括平板电脑图像。

您对如何解决有任何想法？

最佳答案

问题

保证金折叠意味着技术上应该将您的margin上的.container.content放置在父级之外，而不是内部，因为没有任何东西可以折叠在margin-bottom上的.container.content

背景图像不会超出页边空白，因此折叠的margin（现在是.bg的属性，因为.bg-color也会将其margin-bottom向上折叠）会窥视页面的实际背景-你看到的奶油色。

另外，有趣的是，我很确定这意味着Chrome呈现了错误的图像。

可以在MDN上找到有关“保证金折叠”的更多信息。



解决方案

最简单的，只需更改电流：

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

至

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

填充不会折叠，因此它无法向上传递，现在必须拉伸父级，而不是让父级声明它是自己的。

关于css - 在Firefox中扩展外部元素以包括内部元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36187317/