ie6保證金擴大20px

我div的包裝在div的我的html代碼是。ie6保證金擴大20px

<div id="content-row"> 
     <div id="left-box"> 
       <div id="small-box"> 
       </div> 
       <div id="small-box"> 
       </div> 
       <div id="small-box"> 
       </div> 
       <div id="small-box"> 
       </div> 
     </div> 
    </div>

和我的CSS是

/*content-row*/ 
#content-row { 
    margin: 0 auto!important; 
    padding-left:50px; 
    width:990px; 
    height:320px; 
    padding-bottom:20px;  
} 
#left-box { 
    float:left; 
    width:360px; 
    height:340px; 
} 
#small-box { 
    width:160px; 
    height:150px; 
    background-color:#fff; 
    float:left; 
    margin:0px 20px 20px 0px; 
}

上面的樣式表是專爲IE6。我的問題是左邊框在右邊多了20px。當我將左框定義爲360px時;它需要380px;

這裏是鏈接到完整的代碼。

http://jsfiddle.net/HXGsT/

什麼是錯的代碼？

來源

2010-09-29 Ibrahim Azhar Armar

改變你的'id's類。 'id'在HTML文檔中必須是唯一的。 – Kyle 2010-09-29 08:23:35

@凱爾我無法得到你想說的話。你能準確嗎？如果您對我有任何建議，我將不勝感激。謝謝。 – 2010-09-29 08:26:09

你有多個'id =「small-box」';這不是有效的HTML。 HTML文檔中的每個「id」屬性都必須具有不同的值。另見：http://webdesign.about.com/od/css/f/blfaqmultiIDs.htm – Piskvor 2010-09-29 08:34:35

這是在IE6已知BG，看到這個頁面瞭解更多信息： http://www.positioniseverything.net/explorer/doubled-margin.html

基本上，速戰速決是還添加display: inline;到浮動元素。

來源

2010-09-29 08:23:09 CharlesLeaf

哈哈，解決了。：），感謝你的這篇文章。 – 2010-09-29 08:25:05

在回答您的評論：

<div class="content-row"> 
     <div id="left-box"> 
       <div class="small-box"> 
       </div> 
       <div class="small-box"> 
       </div> 
       <div class="small-box"> 
       </div> 
       <div class="small-box"> 
       </div> 
     </div> 
    </div> 


.content-row { 
    margin: 0 auto!important; 
    padding-left:50px; 
    width:990px; 
    height:320px; 
    padding-bottom:20px;  
} 
#left-box { 
    float:left; 
    width:360px; 
    height:340px; 
} 
.small-box { 
    width:160px; 
    height:150px; 
    background-color:#fff; 
    float:left; 
    margin:0px 20px 20px 0px; 
}

的ID #left-box可以是一個ID因爲只有這些元素與id="left-box"在文檔中的一個，但因爲別人重複，它們必須被定義類:)

來源

2010-09-29 08:28:48 Kyle

雖然不是問題的解決方案，但這是一個非常有效的觀點，並且我在網上看到的錯誤越來越多。另外，對樣式使用ID是非常危險的，因爲覆蓋所述樣式的唯一好方法是使用元素上的內聯CSS。 – CharlesLeaf 2010-09-29 08:38:27

謝謝你凱爾。我正在更改我的代碼。 :) – 2010-09-29 08:41:57

ie6保證金擴大20px

回答

相關問題