ie6下常見的 相容問題
阿新 • • 發佈：2018-12-23
1.<!DOCTYPE HTML>文件型別的宣告。
產生條件：IE6瀏覽器，當我們沒有書寫這個文件宣告的時候，會觸發IE6瀏覽器的怪異解析現象；
解決辦法：書寫文件宣告。
2.不同瀏覽器當中，很多的標籤的預設樣式不同，如預設的外部丁內補丁。
產生條件：不同瀏覽器；
解決辦法：利用CSS reset檔案進行樣式的清除，然後再根據需要進行設定。
3.橫向雙倍外邊距
產生條件：在IE6中塊元素浮動後，會出現橫向雙倍margin現象。
解決辦法： 在float標籤的樣式控制中加入display：inline
4.預設行高
產生條件：IE6、IE7、遨遊瀏覽器；設定的文字高度超出盒模型內容區域設定的高度時會影響佈局。
解決辦法：給超出高度的標籤設定overflow：hidden；或者將文字的行高line-height設定為小於塊的高度。
5.img外部的border
產生條件：img外部有a標籤，即img標籤有連結時
解決辦法：設定img邊框border:0;
6.圖片預設有間距。
產生條件：img標籤（每個img之後敲了回車）
解決辦法：為img設定float的浮動佈局方式。
7.經典3畫素bug
產生條件：IE6瀏覽器，浮動塊元素與未浮動塊元素處於同一行，有預設的3px間距。
解決辦法：設定非浮動元素浮動。
8.預設行高
產生條件：清除浮動的時候，有些人會採取一種清浮動的方法，使用一個空的div，然後為這個div設定{clear：both}。在大部分
瀏覽器當中，這樣做是沒有任何問題的，但是在IE6瀏覽器當中，div即使是空的，也會存在預設行高。
解決辦法：設定其高度為0，並設定overflow:hidden。{height:0;overflow:hidden;clear:both;}
9.a標籤hover不適用於所有標籤
產生條件：IE6瀏覽器中hover只支援a標籤的使用，不支援一切其它標籤使用；
解決辦法：合理用a標籤巢狀其他行內標籤或者用javascript模擬a的hover效果；詳情請檢視日誌：相容IE6 a標籤hover效果
10.table標籤當中border-color屬性設定無效
產生條件：IE6中table設定屬性border-color無效；
解決辦法：運用CSS樣式進行控制，而不是使用屬性進行樣式的處理。
11.png格式圖片
產生條件：IE6瀏覽器，不支援透明；
解決辦法：使用javascript進行處理；或者使用gif、jpg影象替代掉png圖片的使用。(圖片可以用png8)
12.透明rgba與opacity
產生條件：IE6不支援此兩種透明的設定方法；
解決辦法：使用IE6當中的濾鏡filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。
13.子選擇器在IE6中不能使用
產生條件：IE6瀏覽器，使用E>F子選擇器；
解決辦法：採用其他選擇器或者採用後代選擇器進行控制，如：div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。
14.不支援最大最小寬高
產生條件：IE6瀏覽器，標籤的最低高度/寬度設定（min/max-height）
解決辦法：為IE6單獨設定hack，即_height:最小高度值；_width：最小寬度值（對於IE6，當實際寬高超出定義的寬高時，元素會自動調整寬高）。對於最大高度和最大寬度，沒有必要設定相容，當前對於開發者來說，只需要保證IE6下正常顯示即可，無需在它身上花費太多功夫。
15.縱向居中，IE6不支援display:table-cell
產生條件：IE6瀏覽器，設定一個元素在另一個元素中垂直方向上居中對齊，不能夠支援以單元格的方式來顯示元素；
解決辦法：如果是單行文字，採用line-height和height的配合使得文字垂直居中，如果中間是其他元素或者多行文字，採用其他方法進行居中處理，處理方法有多種，詳見日誌：CSS元素水平垂直居中。
16.input 聚焦框顏色與樣式不同
產生條件：各個瀏覽器表現不同；
處理方法：使用outline:none，清除預設樣式之後再統一設定。
17.滑鼠移上小手效果
產生條件：IE6，cursor:hand ：IE完全支援。但是在firefox是不支援的，沒有效果。cursor:pointer ：是CSS2.0的標準。所以firefox是支援的，但是IE5.0既之前版本不支援。IE6開始支援。；
解決辦法：設定兩種cursor:pointer ; cursor:hand。
18.子標籤無法撐開父標籤的高度
產生條件：父標籤內部含一個或多個子標籤，父標籤沒有設定浮動，而子標籤發生浮動；
處理方法：方法1：在子標籤最後新增清除浮動的設定<div style='height:0;clear:both'></div>;方法2：為父標籤新增{overflow:hidden;}的樣式；方法3：為父標籤設定固定高度。
19.li的間距問題
產生條件：IE6瀏覽器 li標籤設定寬高，且li裡面的元素髮生了浮動；
處理方法：方法1：li不設定寬高；方法2：li內部的標籤不進行浮動。
20.行內元素佈局混亂
產生條件：行內元素為包含框時，如果包含框包含的絕對定位元素以百分比為單位進行定位；
處理方法：在行內元素當中加入{zoom:1}，觸發IE的hasLayout。關於hasLayout的更多介紹請參見日誌：hasLayout IE瀏覽器bug的來源。
21.多顯示一個字
產生條件：多個浮動元素中間夾雜HTML註釋語句，浮動元素寬度設定為100%；則在下一行多顯示一個上一行的最後一個字元；
處理方法：果斷刪掉註釋！
22.CSS優先順序 ！important
產生條件：IE6當中，在同一組CSS屬性中，!important不起作用；
處理方法：單獨設定。
23.img圖片下部高度多餘5px
產生條件：IE6瀏覽器；
處理方法：將圖片轉化為塊級物件，即display:block。還有四種其他方法，詳細解釋參見日誌：“IE6 BUG 圖片元素img下 高度超出 出現多餘空白”
24.文字超出寬度折行 處理方法：word-break: break-all;word-wrap: break-word; 前者會截斷單詞折行，後者會保持這個單詞折行。25.文字溢位顯示省略號 處理方法：white-space:nowrap;overflow: hidden; text-overflow:ellipsis; 26、ie6下固定定位fixed不相容問題（不閃屏） *html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html.propage_posL{_position:absolute;_right:expression(eval(document.documentElement.scrollLeft+540)); _top:expression(eval(document.documentElement.scrollTop));_margin-right:55%;}