前言
瀏覽器的兼容性問題是個很龐大複雜的問題，很難找到四海皆准的辦法，這裏我們只是簡單介紹下幾種經典的處理兼容性問題的方法。
一、什麼是瀏覽器的兼容性問題
瀏覽器兼容性問題又被稱爲網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和製作中，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對於瀏覽器軟件的開發和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。
二、爲什麼會有兼容性問題
主要原因有以下三個方面：
同一產品，版本越老，bug越多
同一產品，版本越新，功能越多
不同產品，不同標準，不同實現方式
三、處理兼容性問題的思路
思路1：從產品的角度
- 首先了解產品的受衆，比如是面向年輕羣體，還是面向政府或單位部門
- 然後查詢受衆的瀏覽器比例，可以通過瀏覽器市場份額網站
- 再者確定效果優先還是基本功能優先
漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
優雅降級 (graceful degradation): 一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
思路2：從產品實現難度和開發成本——是否值得做
四、如何處理兼容性問題
首先我們先查閱CSS屬性兼容，可以得到該css屬性在目標瀏覽器是否兼容，如下圖所示一些常見的css屬性兼容性：
1、根據兼容需求選擇技術框架／庫（jquery）
2、根據兼容需求選擇兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
- HTML5Shiv——讓 IE 6-8 支持 HTML5 標籤並添加默認樣式
- respond.js——讓 IE 6-8 支持 min/max-width CSS3 媒體查詢。注意： 引用 respond.js 的 <script> 標籤應放在所有 CSS 文件之後。
- css reset（革命派）——將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標籤樣式
- normalize.css（改良派）——和css reset的用法一樣，但是不再像後者那樣簡單粗暴的將所有的樣式去掉，而是保留了一些合理的樣式。他們提倡的是每個元素都有存在的意義！
- Modernizr——Modernizr 是一個用來檢測瀏覽器功能支持情況的 JavaScript 庫。當你在網頁中嵌入Modernizr的腳本時，它會檢測當前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image等，同時也會檢測是否支持HTML5的 特性，比如audio、video、本地儲存、和新的 <input>標籤的類型和屬性等。在獲取到這些信息的基礎上，你可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創建一個基於JS的 fallback，或者對那些不支持的瀏覽器進行簡單的優雅降級。如果瀏覽器不支持某個特性，它就爲該特性對應的類名加上“no-”的前綴。
3、postCSS
postCSS可以被理解爲一個平臺，可以讓一些插件在上面跑，它提供了一個解析器，可以將CSS解析成抽象語法樹，通過PostCSS這個平臺，我們能夠開發一些插件，來處理CSS。熱門插件如autoprefixer，它可以幫我們處理兼容問題，只需正常寫CSS，autoprefixer可以幫我的自動生成兼容性代碼。PostCSS的目標是通過自定義插件和工具這樣的生態系統來改造CSS。與Sass和Less這些預編譯器相同的原則，PostCSS把擴展的語法和特性轉換成現代的瀏覽器友好的CSS。
4、利用CSS Hack、js 能力檢測做一些修補
CSS Hack:由於不同廠商的瀏覽器，比如Internet Explorer，Safari，Mozilla Firefox，Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
CSS Hack 大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。可以通過browserhacks 查 Hack 的寫法。
- 屬性前綴法（即類內部Hack）：例如 IE6能識別下劃線 _ 和星號 *，IE7能識別星號 *，但不能識別下劃線 _，IE6~IE10都認識 \9，但firefox前述三個都不能認識。該方法不便於記憶，可以通過Autoprefixer,自動添加瀏覽器前綴。
.header{_width:100px;} /*ie6專用*/
.header{*+width:100px;} /*ie7專用*/
.header{*width:100px;} /*ie6，ie7共用*/
.header{width:100px\0;} /*ie8,ie9共用*/
.header{width:100px\9;} /*ie6,ie7,ie8,ie9共用*/
.header{_width:300px\9\0;} /*ie9專用*/
- 選擇器前綴法（即選擇器Hack）
- IE條件註釋法（即HTML條件註釋Hack）：針對所有IE（注：IE10+已經不再支持條件註釋）。這類Hack不僅對CSS生效，對寫在判斷語句裏面的所有代碼都會生效。
另外也可以利用X-UA-Compatible，讓 IE 以最新版本的模式運行。
<meta http-equiv="X-UA-Compatible" content="ie=edge">
例如：
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if IE 7]><html class="ie7 old-ie"><![endif]-->
<!--[if IE 8]><html class="ie8 old-ie"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<![if !IE]><html><![endif]>
五、測試工具
- IE 11 -> F12 開發人員工具 -> 仿真選項卡推薦
- F2etest https://github.com/alibaba/f2etest
- IEtester不支持 Win10
- Modern.IE