3

为什么在两个浮动块之间的 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>
4

3 回答 3

9

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

添加严格的doctype 应该使 HTML 和 CSS 在所有主要浏览器中的行为一致（撇开 MSIE 仍有许多可能修复的错误这一事实不谈）。

<!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; }

这样它在所有浏览器中看起来都很好并且相同。

于 2010-02-03T18:47:15.303 回答
0

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

于 2010-02-03T18:50:31.803 回答
0

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

于 2010-02-03T18:53:11.893 回答