作為Web攻城師，最頭疼的問題莫過於瀏覽器兼容性測試，各種類型瀏覽器，各種版本的瀏覽器，還有各種頭疼的前綴等等。dev.modern.IE是微軟推出的用來幫助開發者創建現代網站的基本開發工具，建議使用網站兼容性掃描工具 http://dev.modern.ie/tools/staticscan/ 來掃描你的網站，看看你的網站是否存在一些兼容性問題。請根據以下五步進行檢查，就可基本解決兼容性問題，實現對Google Chrome、Microsoft Edge、Apple Safari等現代瀏覽器的兼容。
1. 檢查網站是否在標准模式下渲染
在W3C的標准出台前，瀏覽器對網頁的渲染沒有統一的標准，各家有各家的方式。當W3C標准出來之后，標准的渲染模式就稱之為標准模式，而各家瀏覽器還保留了原來的渲染方式來兼容舊版本的網站，稱之為"Quirks Mode（一般翻譯為怪異模式或者兼容模式）"。那瀏覽器怎么知道用標准模式還是兼容模式來解析你的網站呢？現在的瀏覽器廠商們基本都是用Doctype來判斷。如果你的網頁沒有Doctype的聲明，那么瀏覽器就認為你的網站是老舊版本，瀏覽器將啟用兼容模式來解析你的網站，這樣對於用戶來說，將不能夠得到足夠優秀的體驗。
檢查你的網站是否被使用兼容模式渲染，最簡單的方式是使用IE作為測試工具來測試。
- 在IE11中打開你的網站。
- 按F12鍵啟動F12開發人員工具，或者你也可以在IE的工具欄中找到它。
- 檢查工具欄右上角是否有Edge的標志，如果有Edge標志，那么恭喜你，你的網站已經運行在符合IE最新標准的標准模式下。如果顯示不是Edge，那么你的網站是在兼容模式下渲染。
如果你的網站是被當作兼容模式渲染，那么可能是存在以下問題：
-
DOCTYPE無效或者缺失
檢查是否使用了有效並且格式正確的DOCTYPE。如果你的網站是采用HTML5標准的網站，請使用標准HTML5的Doctype聲明：。
<!DOCTYPE html>
- 文檔模式受到X-UA-Compatible這個元標簽的強制限制
在IE11之后已經棄用文檔模式，除了臨時情況外不應再使用。如果你當前針對舊文檔模式使用 X-UA-Compatible 標頭，那么你的網站可能無法使用IE11最新的功能。如果必須針對特定文檔模式，以便支持你現在的網站能夠工作，則需要注意，你使用的是過渡功能，以后的版本中可能不提供該功能。請在頁面檢查是否存在類似以下的代碼，刪除並重新測試你的網站。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <meta http-equiv="X-UA-Compatible" content="IE=8">
-
可能你的網站處於兼容性視圖列表（Compatibility View List）中，IE強制將你的網站在兼容視圖中顯示，以保證網站能夠正確顯示。
首先檢查你的網站是否在兼容性視圖列表中。兼容性視圖列表是一個xml文件，該文件位於：
C:\Users\%YOUR_USERNAME%\AppData\Local\Microsoft\Internet Explorer\IECompatData\iecompatdata.xml
這個文件維護着系統下的網站與IE的兼容信息，每日更新。如果你發現你的網站存在於兼容列表中，請你修改網站中不符合HTML5標准的內容，然后向iepo@microsoft.com 發送電子郵件，請求在 Web 上有可用更新時，請求將你的網站移出兼容性視圖列表。郵件需要包含以下內容：（所有者名稱、公司職務、電子郵件地址、電話號碼、公司名稱、街道地址、網站地址）。
微軟將審查提供的信息，並在下一個計划的列表更新時從"兼容性視圖列表"中刪除你的站點
2. 檢查你使用的框架與類庫是否存在兼容性問題
使用一些過時的框架和類庫有可能引起兼容性問題，請仔細檢查你的網站使用的框架和類庫的版本信息與其最新版本信息，看看是否與最新版本的IE兼容。建議使用兼容性最高穩定性最好的框架版本，比如JQuery請使用1.7.2版本。如果使用最新的版本的話，請進行多次測試。除了穩定性最高以及最新的版本兩個版本以外的版本，不推薦使用。
你們可能會問哪個版本才是兼容性最高穩定性最高的框架版本呢？
請使用http://dev.modern.ie/tools/staticscan/ 掃描你的網站，網站會檢查你是否使用了流行的框架、檢查其版本並給出建議。
3. 檢查你的網站是否還依然在使用UA探測
以前，要知道用戶的瀏覽器是否支持一個特殊的功能的方式通常是檢測瀏覽器的類型以及版本，然后選擇相應的代碼段執行，這個過程通常稱之為User Agent檢測，簡稱UA檢測。但是這個過程是非常容易出錯的，容易被欺騙，代碼邏輯復雜，而且隨着瀏覽器版本的增加，維護困難。
在現在的web開發中，我們會有更好的方式來解決這些問題。現在都基本不檢測瀏覽器的類型和版本了，現在用本地的方法和對象來檢測用戶的瀏覽器所是不是支持某些功能，我們稱之為功能檢測。通過功能檢測，我們能夠知道某個方法在某個瀏覽器上是否真正可用，調用更加安全，邏輯也更加清楚。
//錯誤示范，極不推薦 if (navigator.userAgent.indexOf("MSIE 7") > -1) { // Only for IE7 } //√正確示范，推薦做法 function load() { if ('localStorage' in window) { // Now use local storage return; } }
推薦使用自動化工具Modernizr來進行功能檢測，然后根據檢測的結果來執行相應的邏輯，而不是根據UA檢測的結果。更多關於功能檢測的請參考這里：http://te-webtraining.azurewebsites.net/cn/samples/feature-detection.html
4. 檢查你的瀏覽器前綴是否正確
我們在做Web開發的時候，我們需要用到瀏覽器前綴（Vendor prefixes）來使用一些比較新的CSS或者JavaScript的屬性。瀏覽器前綴包含CSS前綴以及JavaScript前綴，我們說到瀏覽器前綴一般是指CSS前綴。CSS前綴是用來添加對一些實驗性的功能或者屬性的支持。他們不是CSS標准的一部分，但是他們是瀏覽器現存的一些屬性，也許未來會成為CSS 標准的一部分。
以下是四個主要的瀏覽器前綴：
| -ms- |
Microsoft |
| -moz- |
Mozilla |
| -o- |
Opera |
| -webkit- |
Safari, Chrome, 以及其他基於WebKit的browsers |
也許有的時候屬性加了-webkit-或者-moz-，就是沒有-ms-。如果在IE中默認屬性沒有正常工作，嘗試一下加上IE的瀏覽器前綴-ms-，-webkit-, -moz- 和-o-不會影響IE怎么渲染屬性。當前的IE10和IE11已經支持了非常多的CSS3標准屬性，保證標准屬性在沒有前綴下也能正常工作。當屬性沒有正常工作的時候，加上 -ms-試試吧（或者到caniuse.com查查看）。 標准屬性可以在很多現在的瀏覽器中正常工作，但是如果你不確定某個屬性是否需要前綴或者是否能在某個瀏覽器工作，可以上 caniuse.com查看。所有這些工作都非常得耗費精力和時間，所以我們是不是可以有自動化的過程呢? 答案是肯定的。對我們開發者開說，有很多自動化工具來幫助我們完成前綴的過程。這些工具能夠幫助我們大大提高添加瀏覽器前綴的效率。你可以選擇前期處理的mixin工具包如Sass 的 Compass 和Stylus的 Nib 。但是如果你不想要包含他們所有的Mixin庫，你只是想把你的CSS加上瀏覽器前綴，那你可以使用Autoprefier。Autoprefixer將會解析你的CSS文件（如果是使用前期處理工具，那么是在編譯之后）並且根據caniuse.com上的數據添加適當的瀏覽器前綴。這個工具將幫你寫CSS的時候無需擔心某一個屬性是否可用或者是否該加瀏覽器前綴。
而對於JavaScript前綴來說，目前還沒有比較好的自動化工具，不過你還是可以通過caniuse.com來查詢。
更多關於瀏覽器前綴的內容，請訪問：http://te-webtraining.azurewebsites.net/cn/samples/vendor-prefixes.html
下載並使用Autoprefixer，請訪問：https://github.com/postcss/autoprefixer
5. 檢查你的網站是否還在使用插件
隨着移動互聯網的發展，越來越多的瀏覽行為是在日益增多的移動設備以及這些設備自帶的瀏覽器上發生的，因此越來越多的用戶正在不支持插件的瀏覽器下瀏覽。向這些不使用插件瀏覽的用戶提供優秀的網站體驗，是一項非常重要的工作，因為網站必須要面向最廣泛的目標群體。而且越來越多的現代瀏覽器已經宣布停止支持插件技術，比如Google宣布在Chrome42版本以上不再支持NPAPI，詳細請見：https://www.chromium.org/developers/npapi-deprecation 。微軟Edge也不支持ActiveX、BHO等插件技術。
我們建議網站不再使用這些插件技術，利用HTML5，現代的瀏覽器和網站即使不用插件，也能提供優秀的用戶體驗。
| 功能 |
基於插件的技術示例 |
基於標准的等效技術 |
詳細信息 |
| 視頻和音頻 |
Flash、Apple QuickTime、Silverlight |
||
| 圖形 |
Flash、Apple QuickTime、Silverlight、Java 小程序 |
HTML5 Canvas 、可縮放的向量圖形 (SVG)、級聯樣式表級別 3 (CSS3) 過渡 和動畫、CSS 轉換、WebGL |
|
| 脫機存儲 |
Flash、Java 小程序和 Google Gears |
||
| 網絡通信、資源共享和文件上載 |
Flash 和 Java 小程序 |
如果不得不使用插件，強烈建議先測試基於標准的功能是否可用，然后只在必要的時候用插件進行降級。盡量使用標准的HTML5功能進行開發，這樣能使得你的網站在各個瀏覽器上都能有一個非常好的用戶體驗。
通過以上五步，你的網站將會完美兼容各種現代瀏覽器，如Google Chrome、Microsoft Edge以及Apple Safari等。以下是一些Web相關的資源和工具，有興趣的童鞋可以深入了解。
附錄
- 微軟Web技術培訓網站：http://te-webtraining.azurewebsites.net/cn/index.html
- Edge開發者中心：http://dev.modern.ie/
- Web兼容性白皮書下載：http://pan.baidu.com/s/1pJiNEVD
- Web打包成Windows商店應用工具：http://www.manifoldjs.com/
- Web遠程調試工具：http://vorlonjs.com/