3

FireFox の 2 つのフロート ブロックの間に余分なスペースがあるのはなぜですか?

<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

Doctypeが省略されているため、 IE はquirksmodeでレンダリングされます(これは悪いことです)。W3 HTML バリデーターで検証した場合、doctype が見つからないというエラーも発生するはずです。

厳密なdoctype を追加すると、HTML と CSS がすべての主要なブラウザー間で一貫して動作するようになります (MSIE にはまだ多くの修正すべきバグが残っているという事実は別として)。

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

さらに、コンテナの 10px マージンに沿ってうまく収まるように#Container-900px .left幅#Container-900px .rightも指定します。445px

#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を持っていません。おそらく、Doctypeがありませんか？

于 2010-02-03T18:50:31.803 に答える
0

css リセットを使用してください: http://meyerweb.com/eric/tools/css/reset/ が役立つ場合があります。ブラウザ間のデフォルトのレンダリングを「正規化」します。

于 2010-02-03T18:53:11.893 に答える