面試遇到html常見兼容性問題，解決思路！

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

• 解決方案：作成PNG8，也能夠引用一段腳本處理.

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

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

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

#box{ float:left; width:10px; margin:0 0 0 10px;} 
複製代碼

這種狀況之下IE會產生20px的距離

• 解決方案：在float的標籤樣式控制中加入 _display:inline; 將其轉化爲行內屬性。( _ 這個符號只有ie6會識別)

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

首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。 接着，再次使用 "+" 將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

.bb{
    background-color:#f1ee18; /*全部識別*/
    .background-color:#00deff\9; /*IE六、七、8識別*/
    +background-color:#a200ff; /*IE六、7識別*/
    _background-color:#1e0bd1; /*IE6識別*/ 
} 
複製代碼

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

a:link {}
a:visited {}
a:hover {}
a:active {}
複製代碼

9. 怪異模式問題：漏寫 DTD 聲明，Firefox 仍然會按照標準模式來解析網頁，但在 IE 中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫 DTD 聲明的好習慣。如今可使用html5 推薦的寫法：

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

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

11. ie6對png圖片格式支持很差

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

推薦：

• 020 持續更新，精品小圈子每日都有新內容，乾貨濃度極高。
• 結實人脈、討論技術 你想要的這裏都有！
• 搶先入羣，跑贏同齡人！（入羣無需任何費用）
• 羣號：779186871

申請即送：

• BAT大廠面試題、獨家面試工具包,
• 資料免費領取，包括 各種面試題以及答案整理，各大廠面試真題分享！