綜述:雖說IE6在2014年4月將被中止支持,可是不得不說的是,IE6的市場並不會隨着支持的中止而馬上消散下去,對於WEB前端開發工程師來講,兼容IE6 兼容各個瀏覽器,依然是不得不面對的工做。
在此總結了常見的瀏覽器兼容問題,裏面也有IE6的常見兼容問題,供你們分享。
1.<!DOCTYPE HTML>文檔類型的聲明。
產生條件:IE6瀏覽器,當咱們沒有書寫這個文檔聲明的時候,會觸發IE6瀏覽器的怪異解析現象;
解決辦法:書寫文檔聲明。
2.不一樣瀏覽器當中,不少的標籤的默認樣式不一樣,如默認的外部丁內補丁。
產生條件:不一樣瀏覽器;
解決辦法:利用CSS reset文件進行樣式的清除,而後再根據須要進行設置。
3.橫向雙倍外邊距
產生條件:在IE6中塊元素浮動後,會出現橫向雙倍margin現象。
解決辦法: 在float標籤的樣式控制中加入display:inline
4.默認行高
產生條件:IE六、IE七、遨遊瀏覽器;設置的文字高度超出盒模型內容區域設置的高度時會影響佈局。
解決辦法:給超出高度的標籤設置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瀏覽器;
以上爲轉載地址爲:http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769/