標籤：
綜述：雖然說IE6在2014年4月將被停止支援，但是不得不說的是，IE6的市場並不會隨著支援的停止而立刻消散下去，對於WEB前端開發工程師來說，相容IE6 相容各個瀏覽器，依然是不得不面對的工作。在此總結了常見的瀏覽器安全色問題，裡面也有IE6的常見相容問題，供大家分享。 1.<!DOCTYPE HTML>文件類型的聲明。產生條件：IE6瀏覽器，當我們沒有書寫這個文檔聲明的時候，會觸發IE6瀏覽器的怪異解析現象；解決辦法：書寫文檔聲明。2.不同瀏覽器當中，很多的標籤的預設樣式不同，如預設的外部丁內補丁。產生條件：不同瀏覽器；解決辦法：利用CSS reset檔案進行樣式的清除，然後再根據需要進行設定。3.橫向雙倍外邊距產生條件：在IE6中塊元素浮動後，會出現橫向雙倍margin現象。解決辦法： 在float標籤的樣式控制中加入display：inline4.預設行高產生條件：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圖片的使用。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下 高度超出 出現多餘空白” 以上為轉載地址為：http://blog.163.com/[email protected]/blog/static/18046981201371611543769/【轉】IE6 瀏覽器常見相容問題 大匯總（23個）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
