Question

为什么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>

Answer 1

因为省略了doctype导致IE在quirksmode中渲染（这很糟糕）。如果您已使用W3 HTML validator对其进行了验证，则错误的文档类型也应该出错。

添加严格 doctype会使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; }

这种方式在所有浏览器中看起来都很不错。

Answer 2

相比什么？浮动元素的大小为435像素，其间为30像素，预期总数为900像素。它在FF，Opera和Chrome中看起来都一样。我没有IE看。也许你错过了一个doctype？

Answer 3

使用css reset：http://meyerweb.com/eric/tools/css/reset/ 可能有帮助。它“标准化”浏览器之间的默认呈现。

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

3 个答案: