Internet Explorer - 浮動Div之間的空間

Question

我一直在遇到與Internet Explorer的演示文稿問題。以下簡單的代碼塊可以在Safari，FireFox，Chrome和Opera中進行渲染。但是，它會在IE6和IE7中的左右浮動DIV元素之間產生明顯的空間。

我的問題是：是否有更多的正確的方法來實現一個浮點數，以便相同的CSS可以在IE和我提到的其他瀏覽器中工作？如果沒有，在Internet Explorer中擺脫空間的最佳方法是什麼？

謝謝，馬特

<style> 
.left { 
    width:100px; 
    float:left; 
    border: solid black 1px; 
} 

.right { 
    width: 100px; 
    margin-left:100 px; 
    border: solid red 1px; 
} 
</style> 

<div class="left"> 
    a 
</div> 
<div class="right"> 
    b 
</div> 

由於這是一個社區的wiki。我想我會發布與計劃B下面提出的解決方案的工作代碼。

<style> 
     .left { 
     width:100px; 
     border: solid black 1px; 
     float:left; 
    } 

    .right { 
     width:100px; 
     border: solid red 1px; 
     float:left; 
    } 
    .clear { 
     clear:both; 
    } 
</style> 

<div class="left"> 
    a 
</div> 
<div class="right"> 
    b 
</div> 
<div class="clear"></div> 
c 

Answer 1

浮法他們兩個離開，雙方的div後添加以下內容：

<div class="clear"></div> 

.clear { clear: both; } 

這或使用填充，而不是利潤率。

Answer 2

嘗試將display: inline添加到浮動的div。我相信這是一個向浮動元素添加更多利潤的IE錯誤。顯示：內聯在過去爲我工作。希望這可以幫助。

Answer 3

這是雙重邊距浮動錯誤。描述以及這裏：

http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 4

.body { 
    padding:0px; 
    margin:0px; 
}