<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> body,div{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:#900; margin:20px 0 0 20px; float:left; } #div2{ width:300px; height:200px; background:#009; margin:20px 0 0 20px; float:left; } </style> </head> <body> <div id="div1"> </div> <div id="div2"> </div> </body> </html>
上面這段代碼，在IE6和FF中的顯示結果分別如下圖所示:
可以看到，在IE6中顯示的紅色區域的左邊距實際為40px，是CSS代碼中設置的20px的兩倍，這是IE6的雙邊距BUG。當滿足下面這三個條件時，就會出現這個BUG：
1、要為塊狀元素；
2、要左側浮動；
3、要有左外邊距（margin-left）。
出現雙邊距的條件是當浮動元素的浮動方向和margin的方向一致時才會出現。也就是說，並不是只有塊狀元素左浮動，且具有左外邊距時才有這個 BUG，當一個盒子右浮動的同時有一個向右的margin-right的時候，IE6也會把margin-right解析為原來的2倍。當有多個同行元素 都浮動了，而且都有同方向的margin，則只有最靠近浮動方向的元素有雙邊距bug。
解決這個bug有兩個方法：
1.給float的元素添加一個display：inline
2.給ie6寫一個hack，其值是正常值的一半，即_margin-right:10px;這個方法不推薦，因為要加hack寫法，而這個是要盡量避免寫的。但是這個正好能夠說明這個bug的真實存在。