作為 Web 工程師，最頭痛的問題莫過於瀏覽器相容性測試，各種類型瀏覽器，各種版本的瀏覽器，還有各種麻煩的前綴碼等等。dev.modern.IE 是微軟推出的用來幫助開發者創建現代網站的基本開發工具，建議使用網站相容性掃描工具來掃描您的網站，看看您的網站是否存在一些相容性問題。請根據以下五步進行檢查，就可解決一些較為基本的相容性問題，實現對 Google Chrome、Microsoft Edge、Apple Safari 等現代瀏覽器的相容。
Step 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 上有可用更新時，請求將您的網站移出相容性視圖列表。郵件需要包含以下內容：（所有者名稱、公司職務、電子郵寄地址、電話號碼、公司名稱、街道地址、網站地址）。
微軟將審查提供的資訊，並在下一個計畫的列表更新時從 " 相容性視圖列表 " 中刪除您的網站
Step 2：檢查您使用的網站開發框架與類別庫是否存在相容性問題
使用一些過時的開發框架和類別庫有可能引起相容性問題，請仔細檢查您的網站使用的開發框架和類別庫的版本資訊與其最新版本資訊，看看是否與最新版本的 IE 相容。建議使用相容性最高穩定性最好的開發框架版本，比如 JQuery 請使用 1.7.2 版本。如果使用最新的版本的話，請進行多次測試。除了穩定性最高以及最新的版本兩個版本以外的版本，不推薦使用。
您們可能會問哪個版本才是相容性最高穩定性最高的框架版本呢？
請使用此工具掃描您的網站，網站會檢查您是否使用了適合的開發框架、檢查其版本並給出建議。
Step 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 檢測的結果。更多關於功能檢測的請參考這裡
Step 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 來查詢。
更多關於瀏覽器前綴碼的內容，請訪問這裡
下載並使用 Autoprefixer，請訪問這裡
Step 5：檢查您的網站是否還在使用外掛程式
隨著移動網際網路的發展，越來越多的流覽行為是在日益增多的行動設備以及這些設備內建的瀏覽器上發生的，因此越來越多的用戶正在不支持外掛程式的瀏覽器下瀏覽網頁。向這些不使用外掛程式瀏覽的用戶提供優秀的網站體驗，是一項非常重要的工作，因為網站必須要面向最廣泛的目標客群。而且越來越多的現代瀏覽器已經宣佈停止支持外掛程式技術，比如 Google 宣佈在 Chrome42 版本以上不再支持 NPAPI，詳細請見這裡 。微軟 Edge 也不支援 ActiveX、BHO 等外掛程式技術。
我們建議網站不再使用這些外掛程式技術，利用 HTML5，現代的瀏覽器和網站即使不用外掛程式，也能提供優秀的用戶體驗。
| 功能 | 基於外掛程式的技術 | 基於標準的類似技術 | 詳細資訊 |
| 影片和音訊 | Flash、Apple QuickTime、Silverlight | HTML5 影片 和音訊 | 影片、 音訊 |
| 圖形 | Flash、Apple QuickTime、Silverlight、Java 程式(Applet) | HTML5 Canvas 、可縮放的向量圖形 (SVG)、階層式樣式表級別 3 (CSS3) 過渡 和動畫、CSS 轉換、WebGL | Canvas、SVG、過渡、動畫、轉換、WebGL |
| 離線儲存 | Flash、Java 小程式和 Google Gears | Web 儲存、文件 API、IndexedDB 和應用程式緩衝 API | Web 儲存、文件 API、IndexedDB 和應用程式緩衝 API |
| 網路通信、資源分享和檔上傳 | Flash 和 Java 程式(Applet) | HTML5 Web 消息傳遞和跨源資源分享 (CORS) | 通道消息傳遞、XMLHttpRequest |
如果不得不使用外掛程式，強烈建議先測試基於標準的功能是否可用，然後只在必要的時候用外掛程式進行降級。儘量使用標準的HTML5功能進行開發，這樣能使得您的網站在各個瀏覽器上都能有一個非常好的用戶體驗。
通過以上五步，您的網站將會完美相容各種現代瀏覽器，如 Google Chrome、Microsoft Edge 以及 Apple Safari 等。以下是一些 Web 相關的資源和工具，有興趣的同學可以深入瞭解。