常見的瀏覽器兼容性問題

1.不一樣瀏覽器當中，不少的標籤的默認樣式不一樣，如默認的外部丁內補丁。

產生條件：不一樣瀏覽器；

解決辦法：利用CSS reset文件進行樣式的清除，而後再根據須要進行設置。

2.橫向雙倍外邊距

產生條件：在IE6中塊元素浮動後，會出現橫向雙倍margin現象。

解決辦法： 在float標籤的樣式控制中加入display：inline

3.默認行高

產生條件：IE六、IE七、遨遊瀏覽器；設置的文字高度超出盒模型內容區域設置的高度時會影響佈局。

解決辦法：給超出高度的標籤設置overflow：hidden；或者將文字的行高line-height設置爲小於塊的高度。

4.input 聚焦框顏色與樣式不一樣

產生條件：各個瀏覽器表現不一樣；

處理方法：使用outline:none，清除默認樣式以後再統一設置。

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，cursor:hand ：IE徹底支持。可是在firefox是不支持的，沒有效果。cursor:pointer ：是CSS2.0的標準。因此firefox是支持的，可是IE5.0既以前版本不支持。IE6開始支持。；

解決辦法：設置兩種cursor:pointer ; cursor:hand。

15.子標籤沒法撐開父標籤的高度

產生條件：父標籤內部含一個或多個子標籤，父標籤沒有設置浮動，而子標籤發生浮動；

處理方法：方法1：在子標籤最後添加清除浮動的設置<div style='height:0;clear:both'></div>;

　　　　    方法2：爲父標籤添加{overflow:hidden;}的樣式；

　　　　    方法3：爲父標籤設置固定高度。

16.li的間距問題

產生條件：IE6瀏覽器 li標籤設置寬高，且li裏面的元素髮生了浮動；

處理方法：方法1：li不設置寬高； 方法2：li內部的標籤不進行浮動。

17.行內元素佈局混亂

產生條件：行內元素爲包含框時，若是包含框包含的絕對定位元素以百分比爲單位進行定位；

處理方法：在行內元素當中加入{zoom:1}，觸發IE的hasLayout。

18.多顯示一個字

產生條件：多個浮動元素中間夾雜HTML註釋語句，浮動元素寬度設置爲100%；則在下一行多顯示一個上一行的最後一個字符；

處理方法：果斷刪掉註釋！

19.CSS優先級 ！important

產生條件：IE6當中，在同一組CSS屬性中，!important不起做用；

處理方法：單獨設置。

20.img圖片下部高度多餘5px

產生條件：IE6瀏覽器；

處理方法：將圖片轉化爲塊級對象，即display:block。