Почему между этими плавающими элементами Div в FF, а не в IE, есть дополнительное «белое пространство»? - PullRequest
Новая
       9

Почему между этими плавающими элементами Div в FF, а не в IE, есть дополнительное «белое пространство»?

3 голосов
/ 03 февраля 2010

Почему в 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>

Ответы [ 3 ]

9 голосов
/ 03 февраля 2010

Поскольку doctype опущен, из-за чего IE отображает в quirksmode (что плохо). Если вы проверили его с помощью валидатора W3 HTML , он также должен был ошибиться в связи с отсутствующим типом документа.

Добавление строгого типа документа должно привести к тому, что HTML и CSS будут вести себя согласованно во всех основных браузерах (оставляя в стороне тот факт, что в MSIE все еще много ошибок осталось потенциально исправить). 

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

Далее также задайте для #Container-900px .left и #Container-900px .right ширину 445px, чтобы она идеально подходила по краю контейнера в 10 пикселей. 

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

Таким образом, он выглядит хорошо и одинаково во всех браузерах.

0 голосов
/ 03 февраля 2010

Используйте сброс CSS: http://meyerweb.com/eric/tools/css/reset/ может помочь.он «нормализует» рендеринг по умолчанию между браузерами.

0 голосов
/ 03 февраля 2010

По сравнению с чем?Размер плавающих элементов составляет 435 пикселей с 30 пикселями между ними для ожидаемого общего количества 900 пикселейВыглядит одинаково в FF, Opera и Chrome.У меня нет IE, чтобы посмотреть.Возможно, вам не хватает типа документа?

...