工作中遇到的IE6相容性問題及解決辦法
阿新 • • 發佈：2019-02-08
1.IE6下出現內容斷裂，多出一些漢字：
div模擬下拉列表：<div class="ly_detail"><a href=#>11</a><a href=#>22</a></div>
原樣式：
.ly_detail{display:none;position:absolute;top:36px;left:1px;z-index:5;width:87px;}
.ly_detail a{display:block;padding-left:10px;
float:left;
width:100%;
height:23px;
background:#fff;
}
新樣式：
.ly_detail {display: none;position: absolute;top: 36px;left: 1px;z-index: 5;width: 98px;
background: none repeat scroll 0 0 #fff;}
.ly_detail a {display: block;padding-left: 10px;
float: none;
line-height: 1.8;
}
IE6經典bug之一，問題可能存在於：元素的寬、高、浮動、定位等，需一一排除；
寫法規範，即可避免問題。
2.IE6/7下，input標籤背景採用定位，當輸入內容超出標籤寬度時，背景左移至消失。
解決辦法：
1.使用hack新增屬性*background-attachment:fixed;同時模擬背景顏色，例如#fff.
使用了fixed後，背景固定，原先背景定位已經失效，此方法只適合背景單色單一的情況(http://www.top.800hr.com使用此方法)。
2.使用外層div來新增背景，input標籤本身並沒有背景。
<div style=”background:#fff url(image.jpg) no-repeat 2px 2px;width:150px;”>
<input name=”" type=”text” style=” border:0; background:none;” />
</div>
原始：background: url("http://my.healthr.com/css/indeximg/bg_new.gif") no-repeat;
修改：background: #fff url("http://top.800hr.com/img/search_btn_bg.png") no-repeat fixed;
3.解決IE6不識別min-寬高問題
html>body .one{width:auto;height:auto;min-width:80px;min-height:35px;}
.one{width:80px;height:35px;background:#f00;border:1px dotted #00f;}
(兩行樣式順序不限)
高版本解析css結果：width:auto;height:auto;min-width:80px;min-height:35px;background:#f00;border:1px dotted #00f;
IE6解析css結果：width:80px;height:35px;background:#f00;border:1px dotted #00f;
IE6 不支援min-height屬性，但它卻認為height就是最小高度。解決方法：
使用ie6不支援但其餘瀏覽器支援的屬性!important。
#container{min-height:200px; height:auto !important; height:200px;}
4.如何對齊文字與文字輸入框 加上 vertical-align:middle;
<style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style>
5.為什麼無法定義1px左右高度的容器 IE6下這個問題是因為預設的行高造成的,解決的方法也有很多。
例如:overflow:hidden | zoom:0.08 | line-height:1px
6.IE6絕對定位元素的1畫素間距bug
IE6下的這個錯誤是由於進位處理誤差造成（IE7已修復），當絕對定位元素的父元素高或寬為奇數時，bottom和right會產生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值，但對於液態佈局沒有完美的解決方法。
7.Overflow Bug
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;
8.橫向列表寬度bug
如果使用float:left把<li>橫向擺列，並且<li>內包含的a標籤或其他標籤觸發了haslayout,在IE6下就會有錯誤的表現。
解決方法很簡單，只需要給內部的a或其他標籤定義同樣的float:left即可。
9.文字重複Bug
在IE6中，一些隱藏的元素（如註釋、display:none;的元素）被包含在一個浮動元素裡，就有可能引發文字重複bug。
解決辦法：給浮動元素新增display:inline;。
10.連結去邊線（完全相容） a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}
11.頁面內容在IE6偏左，解決辦法設定body標籤text-align:center。
12.IE6,7元素偏移原位置上移
第一種情況：
<td><span></span></td>
td{background:#fff;border-bottom:1px solid #dbdce9;padding:3px 4px;}
span{display:block;float:left;width: 80px;height: 18px;cursor: pointer; background:url("img/u80.png") no-repeat scroll 65% 3px;}
其中span標籤的float:left;不能少，否則IE6,7下內容偏離td標籤上移。
第二種情況：
<div class="xf_posbtn pos_old clearfix">
<a href="/xunfang/addjob" class="xf_old active">選擇已有職位，發起尋訪<i></i></a>
<a href="/xunfang/addnewjob" class="xf_new">建立新的職位，發起尋訪<i></i></a>
<span class="xf_line"></span>
</div>
.xf_posbtn{width:675px;padding:0 0 0 25px;}
.xf_posbtn a{display:inline-block;float:left;width:170px;height:37px;text-indent:-9999px;background-image:url(img/xf_btn_bg.png);background-attachment:no-repeat;}
.xf_posbtn .xf_line{width:100%;display:block;float:left;margin:15px 0 0;border-top:2px solid #5f608f;}
.xf_posbtn .active{position:relative;}
.xf_posbtn .active i{position:absolute;top:44px;left:50%;display:block;width:11px;height:8px;margin:0 0 0 -5px;overflow:hidden;
background:url(img/xf_btn_bg.png) no-repeat -159px -39px;}
active類相對定位，i標籤絕對定位並加背景圖示。其他瀏覽器均正常，只有IE6,7左邊第一個a標籤(含內部i標籤)整體偏離外層div左上移動。
解決辦法：外層div也加上相對定位：.xf_posbtn{position:realtive;width:675px;padding:0 0 0 25px;}
13.IE6下設定行高小於12px
設定固定高度後必須加上：overflow:hidden;
i{width:11px;height:8px;overflow:hidden;.....}
14.IE6,7表格td裡含有a標籤的顯示問題
第一種情況：
<td nowrap="nowrap" rowspan="2"><a href="##">匯出簡歷</a></td>
td{padding:3px 4px;border-bottom:1px solid #dcdcdc;background:#fff;}
a{color:#ccc;}
其他各瀏覽器顯示正常，IE6,7中a標籤的文字"匯出簡歷"出現截斷，下半部分不顯示
由於td是佔兩行，但IE6,7看似只顯示在上面一行，所以解決辦法如下:
a{display:inline-block;height:30px;padding:8px 0 0;*padding:0;}
設定內邊距是保持高版本瀏覽器顯示文字上下居中，而IE6,7不需要偏移。
第二種情況：
<td colspan="9">
<input type="checkbox" id="selAll" onclick="selectAll()"> 全選
<a onclick="exportmore()" class="btn long automenu" style="float:right;" href="###">批量匯出簡歷</a>
</td>
td中含有塊狀a標籤，在IE6,7下a標籤折行右浮動，即顯示在input標籤的右下角。
嘗試方法1：td相對定位，a絕對定位。高版本正常，IE6,7下a標籤高度大於td，但無法撐開td；所以需要必須設定td的高度。
問題：td相對定位後，高版本正常，IE6,7下本身位置上移一點，蓋住上層td的下邊框線。
嘗試方法2：將所在行tr相對定位
問題：chrome中塊狀的a標籤跑到瀏覽器視窗的左上方
最終解決辦法：input外加label，塊狀顯示，與a同樣左浮動
<td colspan="9">
<label style="display:block;float:left;" for="selAll"><input type="checkbox" id="selAll" onclick="selectAll()"> 全選</label>
<a onclick="exportmore()" class="btn long automenu" style="float:left;margin:0 0 0 10px;" href="###">批量匯出簡歷</a>
</td>
15.解決IE相容模式下無法撐開高度的問題
<div id="right" style="height:960px,padding-left:1px;">
<dl>
<dd></dd><dd></dd><dd></dd>
</dl>
<div><input type="button"></div>
</div>
div#right的高度JS根據其內容來設定，但有些IE相容模式下無法識別JS設定的高度，導致內容與頁面底部內容重疊。
解決辦法：div#right{height:auto !important;}
!important優先順序高於行內樣式，依次來覆蓋JS自動設定的高度，清除浮動後，有實際高度撐開外部div，併兼容IE相容模式瀏覽器。
注意：本身最好不要用JS來自動設定容器高度，相容性容易出問題。
!important一般也儘量不用，後期不方便維護。
不要用display:table;不相容IE6,7。
16.IE8及以下版本瀏覽器無法解析背景圖
原樣式：background: url("img/again.png")no-repeat;
修改後：background: url("img/again.png") no-repeat;
IE8及以下版本瀏覽器不識別右括號)與後面內容之間的空格。
div模擬下拉列表：<div class="ly_detail"><a href=#>11</a><a href=#>22</a></div>
原樣式：
.ly_detail{display:none;position:absolute;top:36px;left:1px;z-index:5;width:87px;}
.ly_detail a{display:block;padding-left:10px;
float:left;
width:100%;
height:23px;
background:#fff;
}
新樣式：
.ly_detail {display: none;position: absolute;top: 36px;left: 1px;z-index: 5;width: 98px;
background: none repeat scroll 0 0 #fff;}
.ly_detail a {display: block;padding-left: 10px;
float: none;
line-height: 1.8;
}
IE6經典bug之一，問題可能存在於：元素的寬、高、浮動、定位等，需一一排除；
寫法規範，即可避免問題。
2.IE6/7下，input標籤背景採用定位，當輸入內容超出標籤寬度時，背景左移至消失。
解決辦法：
1.使用hack新增屬性*background-attachment:fixed;同時模擬背景顏色，例如#fff.
使用了fixed後，背景固定，原先背景定位已經失效，此方法只適合背景單色單一的情況(http://www.top.800hr.com使用此方法)。
2.使用外層div來新增背景，input標籤本身並沒有背景。
<div style=”background:#fff url(image.jpg) no-repeat 2px 2px;width:150px;”>
<input name=”" type=”text” style=” border:0; background:none;” />
</div>
原始：background: url("http://my.healthr.com/css/indeximg/bg_new.gif") no-repeat;
修改：background: #fff url("http://top.800hr.com/img/search_btn_bg.png") no-repeat fixed;
3.解決IE6不識別min-寬高問題
html>body .one{width:auto;height:auto;min-width:80px;min-height:35px;}
.one{width:80px;height:35px;background:#f00;border:1px dotted #00f;}
(兩行樣式順序不限)
高版本解析css結果：width:auto;height:auto;min-width:80px;min-height:35px;background:#f00;border:1px dotted #00f;
IE6解析css結果：width:80px;height:35px;background:#f00;border:1px dotted #00f;
IE6 不支援min-height屬性，但它卻認為height就是最小高度。解決方法：
使用ie6不支援但其餘瀏覽器支援的屬性!important。
#container{min-height:200px; height:auto !important; height:200px;}
4.如何對齊文字與文字輸入框 加上 vertical-align:middle;
<style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style>
5.為什麼無法定義1px左右高度的容器 IE6下這個問題是因為預設的行高造成的,解決的方法也有很多。
例如:overflow:hidden | zoom:0.08 | line-height:1px
6.IE6絕對定位元素的1畫素間距bug
IE6下的這個錯誤是由於進位處理誤差造成（IE7已修復），當絕對定位元素的父元素高或寬為奇數時，bottom和right會產生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值，但對於液態佈局沒有完美的解決方法。
7.Overflow Bug
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;
8.橫向列表寬度bug
如果使用float:left把<li>橫向擺列，並且<li>內包含的a標籤或其他標籤觸發了haslayout,在IE6下就會有錯誤的表現。
解決方法很簡單，只需要給內部的a或其他標籤定義同樣的float:left即可。
9.文字重複Bug
在IE6中，一些隱藏的元素（如註釋、display:none;的元素）被包含在一個浮動元素裡，就有可能引發文字重複bug。
解決辦法：給浮動元素新增display:inline;。
10.連結去邊線（完全相容） a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}
11.頁面內容在IE6偏左，解決辦法設定body標籤text-align:center。
12.IE6,7元素偏移原位置上移
第一種情況：
<td><span></span></td>
td{background:#fff;border-bottom:1px solid #dbdce9;padding:3px 4px;}
span{display:block;float:left;width: 80px;height: 18px;cursor: pointer; background:url("img/u80.png") no-repeat scroll 65% 3px;}
其中span標籤的float:left;不能少，否則IE6,7下內容偏離td標籤上移。
第二種情況：
<div class="xf_posbtn pos_old clearfix">
<a href="/xunfang/addjob" class="xf_old active">選擇已有職位，發起尋訪<i></i></a>
<a href="/xunfang/addnewjob" class="xf_new">建立新的職位，發起尋訪<i></i></a>
<span class="xf_line"></span>
</div>
.xf_posbtn{width:675px;padding:0 0 0 25px;}
.xf_posbtn a{display:inline-block;float:left;width:170px;height:37px;text-indent:-9999px;background-image:url(img/xf_btn_bg.png);background-attachment:no-repeat;}
.xf_posbtn .xf_line{width:100%;display:block;float:left;margin:15px 0 0;border-top:2px solid #5f608f;}
.xf_posbtn .active{position:relative;}
.xf_posbtn .active i{position:absolute;top:44px;left:50%;display:block;width:11px;height:8px;margin:0 0 0 -5px;overflow:hidden;
background:url(img/xf_btn_bg.png) no-repeat -159px -39px;}
active類相對定位，i標籤絕對定位並加背景圖示。其他瀏覽器均正常，只有IE6,7左邊第一個a標籤(含內部i標籤)整體偏離外層div左上移動。
解決辦法：外層div也加上相對定位：.xf_posbtn{position:realtive;width:675px;padding:0 0 0 25px;}
13.IE6下設定行高小於12px
設定固定高度後必須加上：overflow:hidden;
i{width:11px;height:8px;overflow:hidden;.....}
14.IE6,7表格td裡含有a標籤的顯示問題
第一種情況：
<td nowrap="nowrap" rowspan="2"><a href="##">匯出簡歷</a></td>
td{padding:3px 4px;border-bottom:1px solid #dcdcdc;background:#fff;}
a{color:#ccc;}
其他各瀏覽器顯示正常，IE6,7中a標籤的文字"匯出簡歷"出現截斷，下半部分不顯示
由於td是佔兩行，但IE6,7看似只顯示在上面一行，所以解決辦法如下:
a{display:inline-block;height:30px;padding:8px 0 0;*padding:0;}
設定內邊距是保持高版本瀏覽器顯示文字上下居中，而IE6,7不需要偏移。
第二種情況：
<td colspan="9">
<input type="checkbox" id="selAll" onclick="selectAll()"> 全選
<a onclick="exportmore()" class="btn long automenu" style="float:right;" href="###">批量匯出簡歷</a>
</td>
td中含有塊狀a標籤，在IE6,7下a標籤折行右浮動，即顯示在input標籤的右下角。
嘗試方法1：td相對定位，a絕對定位。高版本正常，IE6,7下a標籤高度大於td，但無法撐開td；所以需要必須設定td的高度。
問題：td相對定位後，高版本正常，IE6,7下本身位置上移一點，蓋住上層td的下邊框線。
嘗試方法2：將所在行tr相對定位
問題：chrome中塊狀的a標籤跑到瀏覽器視窗的左上方
最終解決辦法：input外加label，塊狀顯示，與a同樣左浮動
<td colspan="9">
<label style="display:block;float:left;" for="selAll"><input type="checkbox" id="selAll" onclick="selectAll()"> 全選</label>
<a onclick="exportmore()" class="btn long automenu" style="float:left;margin:0 0 0 10px;" href="###">批量匯出簡歷</a>
</td>
15.解決IE相容模式下無法撐開高度的問題
<div id="right" style="height:960px,padding-left:1px;">
<dl>
<dd></dd><dd></dd><dd></dd>
</dl>
<div><input type="button"></div>
</div>
div#right的高度JS根據其內容來設定，但有些IE相容模式下無法識別JS設定的高度，導致內容與頁面底部內容重疊。
解決辦法：div#right{height:auto !important;}
!important優先順序高於行內樣式，依次來覆蓋JS自動設定的高度，清除浮動後，有實際高度撐開外部div，併兼容IE相容模式瀏覽器。
注意：本身最好不要用JS來自動設定容器高度，相容性容易出問題。
!important一般也儘量不用，後期不方便維護。
不要用display:table;不相容IE6,7。
16.IE8及以下版本瀏覽器無法解析背景圖
原樣式：background: url("img/again.png")no-repeat;
修改後：background: url("img/again.png") no-repeat;
IE8及以下版本瀏覽器不識別右括號)與後面內容之間的空格。