在div後的IE中額外的垂直空間明確

我已經創建了一個簡單的網格div留下浮動他們和一個空的div在每行的末尾清除。在div後的IE中額外的垂直空間明確

這在Firefox中正常工作，但在IE中，我在行之間獲得了額外的垂直空間。我試圖應用「clearfix」方法，但我一定是做錯了什麼。

爲什麼IE插入額外的垂直空間，我該如何擺脫它？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style> 
     root { 
      display: block; 
     } 

     body { 
      background: white; 
     } 

     .colorChip { 
      position:relative; 
      float: left; 
      width: 20px; 
      height: 20px; 
      margin: 2px; 
      border-style: solid; 
      border-width: 1px; 
      border-color: black; 
     } 

     .clear { 
      clear: both; 
     } 

     .clearfix { 
      display:inline-block; 
     } 

     .clearfix:after, .container:after { 
      clear:both; 
      content:"."; 
      display:block; 
      height:0; 
      visibility:hidden; 
     } 

     * html .clearfix { 
      height:1%; 
     } 
     .clearfix { 
      display:block; 
     } 

    </style> 
    <!--[if IE]> 
<style type="text/css"> 
    .clearfix { 
    zoom: 1;  /* triggers hasLayout */ 
</style> 
<![endif]--> 

    </head> 

    <body> 
    <div class="colorChip clearfix" style="background: rgb(163,143,88)"></div> 
    <div class="colorChip" style="background: rgb(190,170,113)"></div> 
    <div class="colorChip" style="background: rgb(190,250,113)"></div> 
    <div class="clear"></div> 
    <div class="colorChip clearfix" style="background: rgb(187,170,128)"></div> 
    <div class="colorChip" style="background: rgb(215,197,154)"></div> 
    <div class="colorChip" style="background: rgb(243,225,181)"></div> 
    <div class="clear"></div> 
    <div class="colorChip clearfix" style="background: rgb(104,94,68)"></div> 
    <div class="colorChip" style="background: rgb(129,118,92)"></div> 
    <div class="colorChip" style="background: rgb(155,144,116)"></div> 
    <div class="clear"></div> 
    </body> 
</html>

來源

2009-01-23 lajos

IE是有點好笑約空<div>秒 - 它喜歡給他們的文本行的高度。

如果更改.clear這一點，它會收縮到1個像素：

.clear { 
     clear: both; 
     height: 1px; 
     overflow: hidden; 
    }

放在一個背景顏色，看看發生了什麼

來源

2009-01-23 15:14:33 Greg

格雷格非常感謝，它救了我很多時間。 – kobe 2010-10-13 17:43:59

.clear { 
    clear: both; 
    height: 0px; 
    overflow: hidden; 
}

它更改爲0px效果更好..

來源

2009-03-17 12:31:21

沒有它，它在IE6中工作，但不是IE7，它可以在IE7中工作，但增加了IE6的高度。沒有詞來形容我對這個瀏覽器的仇恨。

來源

2010-01-28 14:07:41 Polygon

看一看在這裏也： http://nadirnasir.blogspot.com/2009/04/ie-blank-space-after-img-tag-fix.html

來源

2011-03-11 10:21:55

高度：0像素沒有在IE 8爲我工作，而且，我不想1px的高度，因爲那時會有1px的白線橫跨我的div，灰色背景，我不想爲class =「clear」div的每個實例設置特殊的背景顏色。我試過line-height：0;並且它在IE8，IE7和IE6（我不關心任何比這更老的東西）和FF 3.6中都很棒，沒有增加額外的垂直空間。

 
.clear { 
    clear: both; 
    line-height: 0; 
    overflow: hidden; 
}

來源

2011-03-17 13:35:55 bmarti44

我曾就此問題與IE8和使用以下

.clear 
{ 
    clear:both; 
    height:0; 
    width:0; 
    margin:0; 
    padding:0; 
    line-height:0; 
    overflow: hidden; 
    font-size:0px; 
}

來源

2011-05-18 07:57:44

在div後的IE中額外的垂直空間明確

回答

相關問題