IE6兼容筆記

若是IE678都已經淘汰，雖然說也極少數企業單位會用到IE低版本的深坑瀏覽器，不過基本上如今作web前端開發都較少去兼容IE的低端瀏覽器。想一想當初學習web前端，不可避免的要了解關於IE瀏覽器兼容方面上的處理，即便在工做之後，基本上也沒有處理過IE低版本瀏覽器的兼容問題。如今僅僅是把當初的一個筆記記錄一下。

1.兼容IE6背景圖片透明

第一種方法：把圖片更換爲png-8圖片
第二種方法：在head標籤下引入js代碼

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('*');
</script>
<![endif]-->

2.ie6下margin雙倍問題

IE6會在特定的條件下，將設置的橫向margin值變成雙倍。條件：
1.元素必須浮動（float）;
2.元素必須具備橫向margin，margin-left、margin-right
3.元素必須塊元素
4.瀏覽器必須是ie6

解決方案

設置浮動元素的_display:inline;

注意：IE6雙邊距產生是父子之間、兄弟之間不會產生
示例（ietester 測試 ie6）：



測試結果：

3.a的僞類hover兼容問題

這個來源網絡

4.IE6支持hover解決方案(除a標籤)

在IE6下除了a標籤有hover效果外，其餘標籤是沒有hover效果，爲了解決這個問題，則能夠引入一個文件（csshover.htc）來處理：
只要在body標籤下引入htc文件，如：

body{
    behavior:url("csshover.htc");
}

5.CSS背景透明兼容ie6樣式

#element{
    opacity:0.5;
    filter:alpha(opacity=50);
}

6.inline-block兼容IE67

display:inline-block;
不支持IE6，7(注：針對塊元素，行元素支持)

解決方法：
先讓塊元素變爲內聯，再使用（zoom:1 或float屬性等）觸發塊元素layout
display:inline-block;
*display:inline;
*zoom:1;

代碼示例

IE6下測試(IEtester工具)

7.ie6下最小高度19px

在ie6下設置元素最小高度小於19px無效

解決方法：overflow:hidden

8.ie6下絕對定位問題

ie6下絕對定位元素的父級寬高是奇數的時候元素的right和bottom值會相差1px
html代碼：

IE6瀏覽器：