IE6雙倍邊距問題及其解決方法
IE6雙倍邊距在網頁佈局中是一個很常見的問題，網上關於IE6雙倍邊距的問題討論很多，但大多比較籠統，一般認為在塊元素(比如div)中同時出現flaot和margin兩個樣式時就會在IE6中產生雙倍邊距，寫這篇文章的目的，就是把這個問題討論得透徹一些，讓大家明白，到底在什麼樣的條件下才會出現雙倍邊距問題。
以下是原始碼：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
- <title>ie6雙倍邊距</title>
- </head>
- <body>
- <divstyle="background:red; height:120px;">
- <divstyle="width:100px; height:100px; background:green; margin:10px; float:left;"></div>
-
<divstyle="width:100px; height:100px; background:blue; margin:10px; float:left;"></div>
- </div>
- </body>
- </html>
以下分別是IE6和IE7的顯示效果：
.jpg)
IE6顯示效果
.jpg)
IE7顯示效果
大家看到了，IE7顯示正常，而IE6中綠色背景那個div左邊距是20px，藍色背景那個div顯示正常，這說明什麼問題呢？
我們再做個試驗，將兩個div的float:left改成float:right，以下分別是IE6和IE7的顯示效果：
IE6顯示效果
IE7顯示效果
大家看明白了吧，下邊我們做出結論：
1、當一個或多個並列的塊元素同時應用了margin-left和float:left兩個樣式，IE6中左邊第一個塊元素的左邊距是設定值的2倍；
2、當一個或多個並列的塊元素同時應用了margin-right和float:right兩個樣式，IE6中右邊第一個塊元素的右邊距是設定值的2倍；
3、塊元素預設前後都有換行，float的目的是消除塊元素的前後換行，讓並列的塊元素顯示在一條線上，當並列的塊元素顯示在一條線上時，雙倍邊距隻影響左邊或右邊第一個塊元素，而如果因為其他原因(比如寬度超出最大寬度塊元素出現換行)，雙倍邊距影響每一行左邊或右邊第一個塊元素。
IE6中塊元素產生雙倍邊距的原因我們搞清楚了，那麼怎麼讓IE6和IE7及其他瀏覽器顯示一致呢，方法很簡單，就是給受雙倍邊距影響的塊元素單獨設定樣式，_margin-left或_margin-right，其值是正常顯示值的一半，這個樣式只有IE6可以解釋，這樣在IE6中產生雙倍邊距，正好是我們想要的效果。注意這兩個樣式前的下劃線，另外就是這兩個樣式一定要放在正常樣式margin-left和margin-right的下邊，因為瀏覽器解釋樣式表是從上至下的，如果兩個樣式有衝突，以下邊的樣式為準來顯示。