如果你沒接觸過瀏覽器兼容問題，而你又需要去解決這些問題，此時的你沒有豐富的經驗，對瀏覽器特性也不熟悉，那這篇文章或許能幫到你。

瀏覽器兼容大致可以將兼容問題分為三種，樣式兼容，腳本兼容，腳本操作樣式兼容。

樣式兼容

解決改此種問題需要的技能基礎：

1、使用debug追蹤樣式，查看有效樣式；

2、使用w3c查看樣式詳細信息，包括樣式瀏覽器支持情況、屬性等參數；

3、樣式的優先級，這能幫助你理解那個樣式是有效的，以及讓那個樣式變得有效；

解決思路：首先你應該熟悉上面的技能。當你遇到此類問題時，也有幾種情況：

1、缺少樣式限制，使用瀏覽器默認效果，導致不同瀏覽器顯示結果不一致。處理：加上必要樣式。

2、樣式無效。處理：使用debug追蹤樣式檢查是否被覆蓋，如果沒有那就要梳理一下樣式是否正確，當然這一步對css不熟悉的人很難發現問題，這時就可以借助google和百度，百試百靈。

3、樣式不是想要的，但不方便修改。處理：利用樣式的優先級進行覆蓋重寫。

黑科技：

1、css hack。有時我們會遇到不同的瀏覽器和不同的瀏覽器版本需要分別設置一套不同的樣式，怎樣解決這個問題呢。css hack就幫我們解決了這個問題，利用特殊字符對不同瀏覽器和瀏覽器不同版本設置專屬樣式。

介紹兩篇博客用于入門學習

http://www.cr173.com/html/17948_1.html

http://www.w3cplus.com/css/browser-hacks.html

2、div塌方，內元素沒有撐開div。

.fix{zoom:1;} .fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

腳本兼容

需要技能：1、你需要了解DOM

　　　　　2、你需要懂得使用debug查看瀏覽器的DOM以及內置對象的方法和屬性。

解決技巧和思路：

腳本兼容無非是使用不支持的方法，和操作dom沒有的屬性。

這是也可以借助debug工具，利用debug工具將不同瀏覽器的對象log出來后，你就可以查看它支持那些屬性。可見，掌握了debug工具你就已經掌握了解決眾多前端問題方法了。

腳本操作樣式兼容

這類問題在自適應方面比較常見，因為js獲取到的高度和寬度不一致引起自適應時出現滾動條之類的，這里涉及到瀏覽器的高度算法問題，網上有很多解決案例。

總結

解決兼用問題，首先你要判斷屬于那種類型，然后根據類型使用工具查找原因或組織語句在搜索引擎上快速查找到你需要問題。不同類型的處理，上面有所描述，但未能涵蓋所有，如有更好的方式和步驟望慷慨分享。

最后勵志一下：處理瀏覽器兼容并不是一件需要很多經驗和記憶，即使你是一個小白，你都是可以解決的。

轉載于:https://www.cnblogs.com/rainbean-blog/p/6184211.html

總結

以上是生活随笔為你收集整理的浏览器兼容解决思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。