前端常見的瀏覽器兼容性問題及解決方法（不斷更新中） - SHERO-Vae－IT工程師數位筆記本

文章出處

1. png24位的圖片在iE6瀏覽器上出現背景

　　解決方案：做成PNG8，也可以引用一段腳本處理。

2. 瀏覽器默認的margin和padding不同

　　解決方案：加一個全局的 *{margin:0;padding:0;} 來統一。

3. IE6雙邊距bug：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。

1 #box{ float:left; width:10px; margin:0 0 0 10px;}

　　解決方案：在float的標簽樣式控制中加入 _display:inline; 將其轉化為行內屬性。( _ 這個符號只有ie6會識別)這種情況之下IE會產生20px的距離

4. 漸進識別的方式，從總體中逐漸排除局部。

　　首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。

　　接著，再次使用 "+" 將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

1 .bb{
2     background-color:#f1ee18; /*所有識別*/
3     .background-color:#00deff\9; /*IE6、7、8識別*/
4     +background-color:#a200ff; /*IE6、7識別*/
5     _background-color:#1e0bd1; /*IE6識別*/ 
6 }

5.IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下,只能使用getAttribute()獲取自定義屬性

　　解決方法：統一通過getAttribute()獲取自定義屬性

6. IE下，event對象有 x、y 屬性，但是沒有 pageX、pageY屬性; Firefox下，event對象有 pageX、pageY 屬性，但是沒有 x、y 屬性

　　解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

7. Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示

　　解決方法：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決

8. 超鏈接訪問過后 hover 樣式就不出現了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了

　　解決方法：改變CSS屬性的排列順序 L-V-H-A

1 a:link {}
2 a:visited {}
3 a:hover {}
4 a:active {}

9. 怪異模式問題：漏寫 DTD 聲明，Firefox 仍然會按照標準模式來解析網頁，但在 IE 中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫 DTD 聲明的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html) 推薦的寫法：<!DOCTYPE html>

10. 上下margin重合問題：ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。

　　解決方法：養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。

11. ie6對png圖片格式支持不好

　　解決方案：引用一段腳本處理

文章列表