前言
瀏覽器的兼容性問(wèn)題是個(gè)很龐大復(fù)雜的問(wèn)題，很難找到四海皆準(zhǔn)的辦法译柏，這里我們只是簡(jiǎn)單介紹下幾種經(jīng)典的處理兼容性問(wèn)題的方法翼馆。
一、什么是瀏覽器的兼容性問(wèn)題
瀏覽器兼容性問(wèn)題又被稱(chēng)為網(wǎng)頁(yè)兼容性或網(wǎng)站兼容性問(wèn)題接癌，指網(wǎng)頁(yè)在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁(yè)間的兼容問(wèn)題。在網(wǎng)站的設(shè)計(jì)和制作中扣讼，做好瀏覽器兼容缺猛，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對(duì)于瀏覽器軟件的開(kāi)發(fā)和設(shè)計(jì)，瀏覽器對(duì)標(biāo)準(zhǔn)的更好兼容能夠給用戶(hù)更好的使用體驗(yàn)荔燎。
二耻姥、為什么會(huì)有兼容性問(wèn)題
主要原因有以下三個(gè)方面：
同一產(chǎn)品，版本越老有咨，bug越多
同一產(chǎn)品琐簇，版本越新，功能越多
不同產(chǎn)品座享，不同標(biāo)準(zhǔn)婉商，不同實(shí)現(xiàn)方式
三、處理兼容性問(wèn)題的思路
思路1：從產(chǎn)品的角度
- 首先了解產(chǎn)品的受眾渣叛，比如是面向年輕群體丈秩，還是面向政府或單位部門(mén)
- 然后查詢(xún)受眾的瀏覽器比例，可以通過(guò)瀏覽器市場(chǎng)份額網(wǎng)站
- 再者確定效果優(yōu)先還是基本功能優(yōu)先
漸進(jìn)增強(qiáng)(progressive enhancement): 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面淳衙，保證最基本的功能蘑秽，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶(hù)體驗(yàn)
優(yōu)雅降級(jí) (graceful degradation): 一開(kāi)始就構(gòu)建完整的功能滤祖，然后再針對(duì)低版本瀏覽器進(jìn)行兼容筷狼。
思路2：從產(chǎn)品實(shí)現(xiàn)難度和開(kāi)發(fā)成本——是否值得做
四、如何處理兼容性問(wèn)題
首先我們先查閱CSS屬性兼容匠童，可以得到該css屬性在目標(biāo)瀏覽器是否兼容埂材，如下圖所示一些常見(jiàn)的css屬性兼容性：
1、根據(jù)兼容需求選擇技術(shù)框架／庫(kù)（jquery）
2汤求、根據(jù)兼容需求選擇兼容工具（html5shiv.js俏险、respond.js、css reset扬绪、normalize.css竖独、Modernizr）
- HTML5Shiv——讓 IE 6-8 支持 HTML5 標(biāo)簽并添加默認(rèn)樣式
- respond.js——讓 IE 6-8 支持 min/max-width CSS3 媒體查詢(xún)。注意： 引用 respond.js 的 <script> 標(biāo)簽應(yīng)放在所有 CSS 文件之后挤牛。
- css reset（革命派）——將瀏覽器的默認(rèn)樣式全部去掉莹痢，更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式
- normalize.css（改良派）——和css reset的用法一樣，但是不再像后者那樣簡(jiǎn)單粗暴的將所有的樣式去掉墓赴，而是保留了一些合理的樣式竞膳。他們提倡的是每個(gè)元素都有存在的意義！
- Modernizr——Modernizr 是一個(gè)用來(lái)檢測(cè)瀏覽器功能支持情況的 JavaScript 庫(kù)诫硕。當(dāng)你在網(wǎng)頁(yè)中嵌入Modernizr的腳本時(shí)坦辟，它會(huì)檢測(cè)當(dāng)前瀏覽器是否支持CSS3的特性，比如 @font-face章办、border-radius锉走、 border-image等滨彻，同時(shí)也會(huì)檢測(cè)是否支持HTML5的 特性，比如audio挪蹭、video亭饵、本地儲(chǔ)存、和新的 <input>標(biāo)簽的類(lèi)型和屬性等嚣潜。在獲取到這些信息的基礎(chǔ)上冬骚，你可以在那些支持這些功能的瀏覽器上使用它們，來(lái)決定是否創(chuàng)建一個(gè)基于JS的 fallback懂算，或者對(duì)那些不支持的瀏覽器進(jìn)行簡(jiǎn)單的優(yōu)雅降級(jí)。如果瀏覽器不支持某個(gè)特性庇麦，它就為該特性對(duì)應(yīng)的類(lèi)名加上“no-”的前綴计技。
3、postCSS
postCSS可以被理解為一個(gè)平臺(tái)山橄，可以讓一些插件在上面跑垮媒，它提供了一個(gè)解析器，可以將CSS解析成抽象語(yǔ)法樹(shù)航棱，通過(guò)PostCSS這個(gè)平臺(tái)睡雇，我們能夠開(kāi)發(fā)一些插件，來(lái)處理CSS饮醇。熱門(mén)插件如autoprefixer它抱，它可以幫我們處理兼容問(wèn)題，只需正常寫(xiě)CSS朴艰，autoprefixer可以幫我的自動(dòng)生成兼容性代碼观蓄。PostCSS的目標(biāo)是通過(guò)自定義插件和工具這樣的生態(tài)系統(tǒng)來(lái)改造CSS。與Sass和Less這些預(yù)編譯器相同的原則祠墅，PostCSS把擴(kuò)展的語(yǔ)法和特性轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的CSS侮穿。
4、利用CSS Hack毁嗦、js 能力檢測(cè)做一些修補(bǔ)
CSS Hack:由于不同廠商的瀏覽器亲茅，比如Internet Explorer，Safari狗准，Mozilla Firefox克锣，Chrome等，或者是同一廠商的瀏覽器的不同版本驶俊，如IE6和IE7娶耍，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣饼酿，得不到我們所需要的頁(yè)面效果榕酒。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS胚膊，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
CSS Hack 大致有3種表現(xiàn)形式想鹰，CSS屬性前綴法紊婉、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的辑舷∮骼纾可以通過(guò)browserhacks 查 Hack 的寫(xiě)法。
- 屬性前綴法（即類(lèi)內(nèi)部Hack）：例如 IE6能識(shí)別下劃線 _ 和星號(hào) *何缓，IE7能識(shí)別星號(hào) *肢础，但不能識(shí)別下劃線 _，IE6~IE10都認(rèn)識(shí) \9碌廓，但firefox前述三個(gè)都不能認(rèn)識(shí)传轰。該方法不便于記憶，可以通過(guò)Autoprefixer,自動(dòng)添加瀏覽器前綴谷婆。
.header{_width:100px;} /*ie6專(zhuān)用*/
.header{*+width:100px;} /*ie7專(zhuān)用*/
.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專(zhuān)用*/
- 選擇器前綴法（即選擇器Hack）
- IE條件注釋法（即HTML條件注釋Hack）：針對(duì)所有IE（注：IE10+已經(jīng)不再支持條件注釋）。這類(lèi)Hack不僅對(duì)CSS生效纪挎，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效期贫。
另外也可以利用X-UA-Compatible，讓 IE 以最新版本的模式運(yùn)行异袄。
<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]>
五通砍、測(cè)試工具
- IE 11 -> F12 開(kāi)發(fā)人員工具 -> 仿真選項(xiàng)卡推薦
- F2etest https://github.com/alibaba/f2etest
- IEtester不支持 Win10
- Modern.IE
如果覺(jué)得文章對(duì)你有些許幫助，歡迎在我的GitHub博客點(diǎn)贊和關(guān)注隙轻，感激不盡埠帕！
