[TOC] ## 前言 前端面試中一般都會談到兼容問題，也希望你能講出一些常見的兼容問題以及解決方案。在你的日常工作中，你可能是谷歌瀏覽器開發好，然后各個瀏覽器分別查看，具體修復或者等測試反饋具體問題。而比較厲害的前端會在問題出現之前用一些常見的hack代碼來提前避免這些可能出現的問題。 那么怎么操作才是更好的方式？才能夠提高我們的工作效率？你不妨按照下面的思路去想一下 ## 兼容問題的產生 想要解決這個問題，必須先分析兼容問題產生的原因。 * 代碼基本不考慮兼容或者無從下手，不知道哪些有兼容問題，更不知道即使有問題，這些部分該如何處理。 * 對各個瀏覽器的市場占比不清楚，對內核不清楚，瀏覽器對頁面的解析、渲染不清楚，不知道自己的重點工作，用戶需求是什么。 * 對兼容問題沒有系統的認識，無法對兼容出現的問題進行科學的分類 * 測試修復階段，沒有自己的思想，聽測試反饋，能改的都要改過來，不能改的就說改不了。 ## 用戶體驗整體驗收標準 1. 無論在任何階段，都要在項目開發之前確認用戶群體以及最終的瀏覽器版本，包括最終的分辨率，了解清楚之后確認最終可接受的適配范圍，適配周期，無特殊情況按照公司的適配標準文檔出發。 2. 這個階段確定好之后，就可以有目的性的進行開發，避免不必要的兼容處理以及代碼分析。如果是谷歌等現代瀏覽器就可以大膽使用新css樣式以及酷炫的各種效果和插件，如果是ie等低版本，就要考慮基本功能可以實現的前提下，謹慎引入其他，確定可以實現的前提下再開發。 ## 對瀏覽器的認知 瀏覽器的市場占比，前端的趨勢是適配哪些瀏覽器，哪些分辨率，各個瀏覽器的內核是什么？瀏覽器的兼容問題分類如下： * 對基本樣式的解釋不同，解決辦法：標準文檔聲明，代碼規范，文檔渲染模式，樣式重置，針對當前瀏覽器版本寫hack,js腳本處理 * 對新樣式，新標簽不支持，解決辦法：兼容文件，廠商前綴腳本，替代效果 * 插件，復雜效果支持：查看不支持的具體原因，如能解決再使用，不能解決換能兼容的插件，或者放棄效果，用友好提示文本讓用戶換高級瀏覽器。 * 瀏覽器解析：分為渲染引擎和行為引擎，渲染引擎分為重繪和重排，頁面加載為同步隊列過程。而行為引擎集中在js處理上，建議使用高版本的jq，尤其部分方法，如果不支持用jq的工具方法嘗試，部分原聲的語法不支持的嘗試用新版的jq，目前統一用1.11.1。其中對頁面解析中，部分標簽現代瀏覽器會幫你把標簽補全，而低版本的ie是識別為錯誤的，導致樣式錯誤。另外，對于低版本的標簽和樣式要知道最終的解讀結果是什么。 ## 代碼兼容 代碼做兼容，如上所述，在出現兼容問題之前，最好將兼容問題匯總，代碼中就解決這些問題。這里只對hack類的兼容代碼作分析。 * hack類的分為兩種： 1.針對瀏覽器版本做樣式修訂； 2.針對新樣式或者新標簽做修訂； ## 兼容思想--開發思想 1. 優雅降級 以高版本瀏覽器為基準，實現全部的效果，保證低版本瀏覽器基本功能可用。現代網站為主，用戶對ui以及功能要求較高，可忽略低版本的瀏覽器。 2. 漸進增強 以低版本瀏覽器為基準，保證全部效果可用，在高版本瀏覽器有更好的體驗。 常規網站為主，基本頁面為主，且用戶對這部分要求不高。 ## 兼容問題分類 詳見兼容問題分類文檔 ## 兼容解決方案 友情鏈接： * [w3help常見兼容匯總](http://www.w3help.org/zh-cn/kb/) * [csdn跨瀏覽器知識庫](http://subject.csdn.net/w3help/)