为什么在 FF 而不是 IE 中这些浮动 Div 之间有额外的“空白”？答案

【问题标题】：Why is there extra "white space" between these floated Div's in FF and not IE?为什么在 FF 而不是 IE 中这些浮动 Div 之间有额外的“空白”？
【发布时间】：2011-01-12 18:17:21
【问题描述】：

为什么在 FireFox 中两个浮动块之间有这么多额外的空间？

<html>
<head>
 <style type="text/css">
  #Container-900px { 
    width:900px;
   padding: 10px;
   border: 1px solid #CCCCCC;
   }
    #Container-900px .left { float:left; width:435px; height:300px; }
   #Container-900px .right { float:right; width:435px; height:300px; }

  /* float clearing for IE6 */
  * html .clearfix{
    height: 1%;
    overflow: visible;
  }

  /* float clearing for IE7 */
  *+html .clearfix{
    min-height: 1%;
  }

  /* float clearing for everyone else */
  .clearfix:after{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
  }

   /* CSS3 Styles */
  #Container-900px { 
   -moz-box-shadow: 0px 0px 12px #CCC; /* Firefox */
      -webkit-box-shadow: 0px 10px 12px #CCC; /* Safari, Chrome */
      box-shadow: 0px 0px 12px #CCC; /* CSS3 */ 
    }
   #Container-900px .left {
     background-color: rgb(238, 238, 238);
   }
   #Container-900px .right {
        background-color: rgb(238, 238, 238);
      }
 </style>
</head>
<body>
<h1>Software</h1>
 <div id="Container-900px">
  <div class="left">

  </div>
  <div class="right">

  </div>
 <div class="clearfix">&nbsp;</div>
 </div>
</body>
</html>

【问题讨论】：

标签： html css firefox internet-explorer padding

【解决方案1】：

因为 doctype 被省略，导致 IE 在 quirksmode 中呈现（这很糟糕）。如果您已使用W3 HTML validator 对其进行了验证，那么它也应该会因缺少文档类型而出错。

添加 strict 文档类型应该使 HTML 和 CSS 在所有主要浏览器中的行为一致（撇开 MSIE 仍有可能修复的 many bugs 的事实不谈）。

<!doctype html>
<html lang="en">
    <!-- here you go -->
</html>

此外，还为#Container-900px .left 和#Container-900px .right 提供445px 的宽度，以便它很好地适应容器的10px 边距。

#Container-900px .left { float:left; width:445px; height:300px; }
#Container-900px .right { float:right; width:445px; height:300px; }

这样看起来不错，在所有浏览器中都一样。

【讨论】：

【解决方案2】：

与什么相比？浮动元素的大小为 435 像素，它们之间有 30 像素，预计总大小为 900 像素。它在 FF、Opera 和 Chrome 中看起来是一样的。我没有IE看。也许您缺少文档类型？

【讨论】：

【解决方案3】：

使用 css 重置：http://meyerweb.com/eric/tools/css/reset/ 可能有帮助。它“规范化”了浏览器之间的默认渲染。

【讨论】：