IE7和Firefox 3渲染差异

发布于 2024-07-14 12:34:37 字数 1753 浏览 6 评论 0原文

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

<?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 的渲染符合要求，我错过了什么？

原文

Here is an outline of a page I'm developing.

<?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>

And the 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%;
}

In Firefox 3, the body div (with a green background) is squished to almost nothing while IE7 renders the page perfectly. From what I can tell of the CSS 2.1 standard (via Meyer's O'Reilly book), floated divs should float within their container block which is clearly not the case in Firefox 3.

So if Firefox's rendering is compliant, what am I missing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何止钟意 2024-07-21 12:34:37

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

简单修复：将 overflow: hide; 应用到 #body：

#body {
    overflow: hidden;
}

请参阅这篇文章进行解释。

Your problem is that IE7 clears the parent element so that it contains the floating child. This is not how it should be rendered. Better explanations by other posters.

Simple fix: apply overflow: hidden; to your #body:

#body {
    overflow: hidden;
}

See this post for an explanation.

回复收藏 0 原文

叹梦 2024-07-21 12:34:37

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

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

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

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

回复收藏 0 原文

神仙妹妹 2024-07-21 12:34:37

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

要么将文本放在 body div 中以赋予其重量，要么添加溢出样式：隐藏；到 id=body 的 div。

回复收藏 0 原文

怀中猫帐中妖 2024-07-21 12:34:37

谢谢大家的回答。

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

回复收藏 0 原文

~没有更多了~