Css IE7和Firefox3的渲染差异_Css_Internet Explorer 7_Firefox 3

Css IE7和Firefox3的渲染差异

css

Css IE7和Firefox3的渲染差异,css,internet-explorer-7,firefox-3,Css,Internet Explorer 7,Firefox 3,这是我正在开发的一个页面的概要 <?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

这是我正在开发的一个页面的概要

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

在Firefox3中，body div（背景为绿色）几乎为零，而IE7则完美呈现页面。根据我对CSS 2.1标准的了解（通过Meyer的O'Reilly书），浮动div应该在其容器块中浮动，这在Firefox3中显然不是这样

因此，如果Firefox的呈现是兼容的，那么我缺少什么呢？

一如既往，当一个页面在Internet Explorer和Firefox中呈现不同时，Firefox会正确地呈现该页面

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

从代码中删除xml标记。doctype必须放在页面的第一位，否则IE将忽略它

如果您在IE 8 beta版中查看页面，它将与Firefox完全一样呈现页面。

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

从代码中删除xml标记。doctype必须放在页面的第一位，否则IE将忽略它

如果您在IE 8 beta版中查看页面，它将呈现与Firefox完全相同的页面。

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

在body div中放置文本以赋予其权重，或者添加溢出样式：hidden；到id=body的div。

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

在body div中放置文本以赋予其权重，或者添加溢出样式：hidden；到id=body的div。

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

简单修复：应用

溢出：隐藏到您的#身体
：
#body {
    overflow: hidden;
}

请参阅以获取解释。
您的问题是IE7清除父元素，使其包含浮动子元素。这不是它应该被呈现的方式。其他海报提供更好的解释
简单修复：应用溢出：隐藏到您的#身体
：
#body {
    overflow: hidden;
}

请参阅以获取解释。
谢谢大家的回答
还有另一个解决方案也解决了我的问题：浮动父div（id=“body”）。这是直接从迈耶的书，所以我不知道我怎么错过了它。另一个例子就是学习！另一件事是，这也解决了另一个我没有说明的问题：如何在正文和页脚之间设置边距？因为在Firefox中，清除页脚不允许在正文和页脚之间留出空白。但是，浮动父元素确实如此。
谢谢大家的回答
还有另一个解决方案也解决了我的问题：浮动父div（id=“body”）。这是直接从迈耶的书，所以我不知道我怎么错过了它。另一个例子就是学习！另一件事是，这也解决了另一个我没有说明的问题：如何在正文和页脚之间设置边距？因为在Firefox中，清除页脚不允许在正文和页脚之间留出空白。但是，浮动父元素确实如此。
请注意，Opera将其呈现为类似于Firefox的形式。请注意，Opera将其呈现为类似于Firefox的形式。感谢doctype声明的提示。+1删除（冗余的）XML声明。把IE搞糊涂了，几乎没有什么好的理由来包含它。感谢大家对doctype声明的介绍。+1删除（冗余的）XML声明。混淆了IE，几乎没有很好的理由将其包括在内。是的，这也是我在body div中添加虚拟文本时注意到的行为。是的，这也是我在body div中添加虚拟文本时注意到的行为。我一直使用overflow:auto我自己，但是链接文章提到了使用overflow的原因：在最后一段中隐藏。谢谢你的链接。溢出：隐藏；这绝对是我喜欢的处理方式。这也不是黑客行为，它的行为就像CSS2规范所说的溢出应该起作用：“浮动、绝对定位的元素、内联块、表格单元格、表格标题和除“可见”之外的“溢出”元素（除非该值已传播到视口）建立新的块格式上下文。”我自己也一直使用overflow:auto，但链接文章在最后一段提到了使用overflow:hidden的原因。谢谢你的链接。溢出：隐藏；这绝对是我喜欢的处理方式。这也不是黑客行为，它的行为就像CSS2规范所说的溢出应该起作用：“浮动、绝对定位的元素、内联块、表格单元格、表格标题和除“可见”之外的“溢出”元素（除非该值已传播到视口）建立新的块格式上下文。”