1. 雙外邊距浮動bug
IE6和更低版本中存在雙外邊距浮動bug,顧名思義，這個Windows bug使任何浮動元素上的外邊距加倍
bug重現：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>雙外邊距bug</title> <style type="text/css"> * { margin: 0; padding: 0; } .box1{ background: red; width: 100px; height: 50px; float: left; margin-left: 20px; margin-top: 20px; /*設置display修復雙外邊距bug*/ /*display: inline;*/ } .box2{ background: blue; width: 100px; height: 50px; float: left; margin-left: 20px; margin-top: 20px; } </style></head><body> <div class="box1"> </div> <div class="box2"> </div></body></html>
在IE6環境下測試。
修復前
修復后
從上圖可以看出，紅色方塊與瀏覽器左邊框之間的外邊距加倍了，但是與右邊藍色方塊的右邊距並沒有加倍，同樣經過測試，如果將上述藍色方塊設置為右浮動，並設置margin-right，與右邊框也會產生雙邊外邊距
,這個
bug很容易修復，將元素的display屬性設置為inline就行了( 經測試將display屬性設置為inline-block是不能修復bug的，因為早期的IE版本對inline-block支持的不友好)。因為元素是浮動的，將display屬性設置為inline實際上不會影響顯示方式。但是這似乎會阻止Windows上的IE6和更低版本將所有外邊距加倍。
2. 3像素文本偏移bug
Windows上IE5和IE 6上另一個非常常見的bug是3像素文本偏移bug, 當文本與一個浮動元素相鄰時，這個bug就會表現出來。 例如，假設將一個元素向左浮動， 並且不希望相鄰段落中的文本圍繞浮動元素。你可能會在段落上應用一個左外邊距，其寬度等於浮動元素的寬度：
.myFloat { float:left; width:200px; margin-left 200px; }p{ margin-left: 200px;}
如果這么做，
在文本和浮動元素之間就會出現一個莫名
其妙的 3像素間隙。一
旦浮動元素停
下來， 3像素間隙就會消失。
bug重現：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>3像素文本偏移bug</title> <style type="text/css"> * { margin: 0; padding: 0; } .myFloat { float:left; background: red; width:200px; height: 100px; } p{ margin-left: 200px; width: 200px; background: orange; } </style></head><body> <div class="myFloat"> </div> <p class="first">今天跟大家分享一個免費下載資源的網站——<a href="http://www.1001freedownloads.com/">1001FreeDownloads</a>它擁有超過1000個免費的設計圖像和字體的目錄。這個獨特的網站提供了多種可以用來作為剪貼簿頁面，圖標和壁紙。相信你可以在這里找到你想要的素材。前端er、設計師們收藏咯！</p> </body> </html>
在win10自帶的IE11下是沒有問題的，左邊的浮動塊與右邊的兩個段落塊之間沒有空隙
接下來在開發人員工具中將模仿的文檔模式改成IE5.（經測試IE7以上並沒有這個bug）
很明顯左邊的浮動塊與右邊第一個段落方塊之間出現了3像素的空隙。看上去第一個段落塊右移了3px;
修復這個bug需要雙管齊下。首先， 給包含文本的元素設置任意的高度。這會迫使元素擁有布局（擁有布局‘have layout’）， 這在表面上會消除文本偏移。因為Windows上的IE 6和更低版本將height作為min-height那樣對待，所以設置一個小的高度並不會影響元素在這些瀏覽器中的實際尺寸但是，這會影響其他瀏覽器， 所以要對除了 Windows上的正 6和更低版本之外的所有其他瀏覽器隱藏這個規則。最好的方法是使用 條件注釋把這些樣式轉移到單獨的CSS文件中 。
<!-- [if lt IE 7] --> 針對IE7以下的樣式<!-- [endif] -->
p{ height:1%;}
但是， 這項技術會導致另一個問題。擁有布局的元素被限制為矩形的，並且出現在浮動元素的旁邊而不是它們的下面。添加200像素的外邊距實際上會在IE 5和IE 6中在浮動元素和段落之間產生200像素的間隙 a 為了避免這個間隙， 需要將IE5-6/WiiL上的外邊距重新設置為零:
p{ margin-left:0; height:1%;}
文本偏移被修復了 ，但在IE5模式下查看仍有3像素間隙，這一次是在浮動元素上。為了去掉這個間隙，需要在浮動元素上設置一個負的3像素右外邊距：
p{ margin-left:0; height:1%;}.myFloat{ margin-right:-3px;}
再次在IE5模式下查看，間隙消失了，（實際測試中將 height:1%;這一行去掉也沒影響？？？）
<html><head> <meta charset="utf-8"> <title>3像素文本偏移bug</title> <style type="text/css"> * { margin: 0; padding: 0; } #left { float: left; width: 200px; height:100px; background:red; } #right { width: 200px; height:100px; background:blue; margin-left: 200px; } /*刪除#right的margin-left*,並添加下面的樣式修復bug/ /*#left { margin-right:-3px; } */ </style></head><body> <div id="left"></div> <div id="right"></div> </body></html>
3. IE6以下相對定位中的絕對定位bug
IE6下相對定位元素內絕對定位元素的偏移定位Bug問題，即絕對定位元素的相對偏移元素是誰。一般情況下，是相對於父元素以上直到DOCUMENT（默認已定位）的已定位元素（即position的設置)。但在IE6，IE5中出現的BUG卻是定位在已定位元素的外圍或以DOCUMENT相對而言。
這些bug的原因在於相對定位的元素沒有獲得IE/Win的內部hasLayout屬性。
bug重現：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0;padding: 0; } .box{ position:relative; border:2px solid red; } .box1{ width: 300px; height: 200px; } .box2{ width: 50px; height: 50px; position:absolute; bottom:0; left:0; background:#CCC; } </style></head><body> <div class="box"> <div class="box1"></div> <div class="box2">絕對浮動框</div> </div></body></html>
在IE5的模式下，絕對浮動框是相對視口定位的。
解決這個bug的方法很簡單，一種方法是顯式的給外層的box設置寬度和高度
。
如果外層容器寬度和高度不確定，推薦使用條件注釋過濾IE6以下版本。在條件過濾中給外層容器設置一個小的高度如：height:1%；另一種解決方法是給
給父層設置zoom:1觸發layout。
