div容器額外餘量IE6

<div id="container"> 
    <div id="content"> 
     <div class="halfLeft"></div> 
     <div class="halfRight"></div> 
    </div> 
</div> 

#container{ width:960px;margin:auto; background-image:url(../img/contentbg.jpg);} 
.halfLeft{font: 1.5em BrushcutRegular; background:url(../img/halfbg.png) no-repeat;margin:12px 0px 12px 12px;float:left;width:468px;height:336px;} 
.halfRight{font: 1.5em BrushcutRegular; background:url(../img/halfbg.png) no-repeat;margin:12px 12px 12px 0px;float:right;width:468px;height:336px;}

出於某種原因，這使得#container的對IE6的左邊添加一個額外的12像素...div容器額外餘量IE6

任何想法有什麼不對？

來源

2011-07-02 Zaphod Beeblebrox

您是否嘗試過刪除CSS屬性，直到問題消失？此外，通常更好的做法是將左側和右側的div左移，即使它看起來不符合直覺。 –

我想你應該添加一些樣式＃內容：

padding: 12px; 
overflow: hidden; /* Floating fix for modern browsers */ 
zoom: 1; /* Floating fix for IE */

而且從.halfLeft和.halfRight去除餘量。

來源

2011-07-02 16:30:48 Vladimir

注意：我不知道你以前應用於#content的風格，所以要小心。如果#content {}中有'寬度'，您應該編輯它的值，例如：#content {width：960px}應該是#content {width：936px;}因爲填充。 – Vladimir

嘗試將display: inline;添加到.halfLeft和.halfRight兩者中。

進一步信息：The IE5/6 Doubled Float-Margin Bug

來源

2011-07-02 14:55:21

div容器額外餘量IE6

回答

相關問題