为什么深蓝色背景没有出现在FireFox中（它在IE中出现）？

Question

请告诉我为什么FireFox中没有显示深蓝色背景（主白部分和外部浅蓝部分之间）？它确实在IE中显示。

网站网址为http://www.moorespeed.co.uk/

相关代码位于：http://www.moorespeed.co.uk/Content/site.css

#page 
{
    background-color:#082d47;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 0 0;
    width: 970px;
}

Answer 1

您的#main div已浮动，并且容器不会自动展开以包含浮动子项。但是，如果您将overflow:auto应用于#page，它应该像您期望的那样展开：

#page 
{
  background-color:#082d47;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 0 0;
  width: 970px;
  overflow:auto;
}

Answer 2

通常，当Internet Explorer和Firefox呈现页面的方式不同时，Internet Explorer就会出错。

在这种情况下，它是Internet Explorer中众所周知的错误。当元素具有大于元素的浮动元素时，IE将根据子元素调整元素的大小。

这是错误的，Firefox确实正确呈现了代码。

但是，您可以将CSS添加到page元素，以便它可以从浮动子元素中获取它的大小。您只需为overflow规则指定overflow: hidden;属性的值，例如#page，即可获得背景。

overflow规则不会更改内容溢出的处理方式，因为您没有指定任何高度没有溢出，但它会影响元素的大小。