常見IE瀏覽器bug及其修復方案(雙外邊距、3像素偏移、絕對定位)

時間 2019-11-30

原文原文鏈接

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重現：

      
      
      
      
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       相信你能夠在這裏找到你想要的素材。前端er、設計師們收藏咯！</p>
       
       
       
       
       
       
       
       
      
      
      
      
<!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個免費的設計圖像和字體的目錄。這個獨特的網站提供了多種能夠用來做爲剪貼簿頁面，圖標和壁紙。 </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%;這一行去掉也沒影響？？？）

接下來的測試發現不止是浮動元素和文本之間，兩個div塊之間在IE6如下也會產生間隙。修復方案是刪除#right的margin-left,並給#left添加樣式margin-right:-3px

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
<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>