Question

这是我正在开发的页面的大纲。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <link rel="stylesheet" href="../css/test.css" />
    <title>Prosperity Login</title>
  </head>
  <body>
    <div id="banner">
    </div>
    <div id="subbanner">
    </div>
    <div id="body">
      <div id="colA">
      </div>
      <div id="colB">
        <div id="B1">
        </div>
        <div id="B2">
        </div>
      </div>
      <div id="colC">
      </div>
      <div id="colD">
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html>

CSS：

* {
  margin: 0px;
  padding: 0px;
}



div {
  border: 1px dotted;
}

#banner {
  height: 70px;
  width: 100%;
}

#subbanner {
  height: 30px;
  width: 100%;
}

#body {
  background-color: #CCFFCC;
  width: 80%;
}

#colA{
  float: left;
  height: 120px;
  width: 24%;
}

#colB{
  float: left;
  height: 80px;
  width: 24%;
}
#colC{
  float: left;
  height: 120px;
  width: 24%;
}
#colD{
  float: left;
  height: 120px;
  width: 24%;
}

#B1{
  float: right;
  height: 48px;
  width: 80%;
}

#B2{
  float: right;
  height: 28px;
  width: 80%;
}
#footer{
  height: 30px;
  width: 100%;
}

在Firefox 3中，身体div（带有绿色背景）被压缩到几乎没有，而IE7完美呈现页面。从我所知的CSS 2.1标准（通过Meyer的O'Reilly书），浮动的div应该在他们的容器块中浮动，这在Firefox 3中显然不是这样。

因此，如果Firefox的渲染符合要求，我缺少什么？

Answer 1

您的问题是IE7清除父元素，以便它包含浮动子元素。这不是它应该如何呈现。其他海报更好的解释。

简单修复：将overflow: hidden;应用于#body：

#body {
    overflow: hidden;
}

请参阅this post以获取解释。

Answer 2

与往常一样，当Internet Explorer和Firefox中的页面呈现方式不同时，Firefox会正确呈现页面。

身体div不应该有任何高度。它只包含浮动元素，所以它中没有任何东西可以给它任何高度。浮动元素不会影响其父级的大小。 IE做了这个wroing并扩展元素以包含它的孩子。这是众所周知的IE渲染错误之一。

从代码中删除xml标记。 doctype必须首先出现在页面中，否则IE将忽略它。

如果您在IE 8测试版中查看该页面，它将像Firefox一样呈现页面。

Answer 3

没有为id =“body”分配给div的重量或音量。放置在div内部的任何文本都会为其提供音量并将颜色背景渲染为适当的大小。这个问题也将在基于Webkit的浏览器中发挥作用（Chrome，Safari）。

将文本放在body div中以赋予它权重或添加溢出样式：hidden;到id = body的div。

Answer 4

感谢大家的回答。

还有另一种解决方案可以解决我的问题：浮动父div（id =“body”）。这直接来自迈耶的书，所以我不确定我是如何错过它的。另一个例子就是学习！另一件事是，这也解决了我没有说的另一个问题：如何在身体和页脚之间设置边距？因为在Firefox中，清除页脚不允许使用边距来在主体和页脚之间留出空间。但是，浮动父元素会。

IE7和Firefox 3呈现差异

4 个答案: