1

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

<?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 中，body div（带有绿色背景）被压缩到几乎没有，而 IE7 完美地呈现了页面。根据我对 CSS 2.1 标准的了解（通过 Meyer 的 O'Reilly 书），浮动 div 应该在其容器块内浮动，这在 Firefox 3 中显然不是这种情况。

所以如果 Firefox 的渲染是兼容的，我错过了什么？

4

4 回答 4

4

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

简单修复：适用overflow: hidden;于您的#body：

#body {
    overflow: hidden;
}

请参阅此帖子以获取解释。

于 2009-03-01T21:37:45.370 回答
2

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

身体 div 不应该有任何高度。它只包含浮动元素，因此其中没有任何东西可以赋予它任何高度。浮动元素不会影响其父元素的大小。IE 执行此操作并扩展元素以包含它的子元素。这是众所周知的 IE 渲染错误之一。

从代码中删除 xml 标记。文档类型必须在页面中排在第一位，否则 IE 将忽略它。

如果您在 IE 8 beta 中查看该页面，它将完全按照 Firefox 的方式呈现该页面。

于 2009-03-01T21:37:14.527 回答
1

没有为 id="body" 的 div 分配重量或体积。放置在 div 内的任何文本都会赋予它体积并将颜色背景渲染为适当的大小。这个问题也会出现在基于 Webkit 的浏览器（Chrome、Safari）中。

要么在主体 div 中放置文本以赋予其权重，要么添加一种溢出样式：隐藏；到 id=body 的 div。

于 2009-03-01T21:37:41.983 回答
0

谢谢大家的回答。

还有另一种解决方案也可以解决我的问题：浮动父 div (id="body")。这直接来自迈耶的书，所以我不知道我是怎么错过的。另一个例子就是学习！另一件事是，这也解决了另一个我没有说明的问题：我如何在正文和页脚之间设置一个边距？由于在 Firefox 中，清除页脚不允许使用边距来在正文和页脚之间留出空间。然而，浮动父元素确实如此。

于 2009-03-01T23:32:07.293 回答