什么是瀏覽器兼容問題
同一份代碼，有的瀏覽器效果正常昌抠，有的不正常
- 同一產(chǎn)品患朱，版本越老 bug 越多
- 同一產(chǎn)品，版本越新炊苫，功能越多
- 不同產(chǎn)品裁厅，不同標(biāo)準(zhǔn)，不同實(shí)現(xiàn)方式
注釋：
常見瀏覽器的類型：
Internet Explorer侨艾，Safari执虹，Chrome，Opera唠梨，F(xiàn)irefox袋励；Trident(IE內(nèi)核)，Gecko(Firefox內(nèi)核)当叭，Presto(Opera前內(nèi)核) (已廢棄)茬故，Webkit(Safari內(nèi)核,Chrome內(nèi)核原型,開源），Chromium/Blink（Chrome與Opera內(nèi)核）
詳細(xì)內(nèi)容
更多（）
處理兼容問題的思路
要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾蚁鳖、受眾的瀏覽器比例磺芭、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無必要做某件事)
做到什么程度（標(biāo)準(zhǔn)）
- 讓哪些瀏覽器支持哪些效果
如何去做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js醉箕、css reset钾腺、normalize.css、Modernizr)
- 條件注釋讥裤、CSS Hack放棒、js 能力檢測做一些修補(bǔ)
1.處理兼容問題的手段
a.選擇合適的框架,每種框架的兼容性都不一樣
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
b.使用條件注釋(針對IE)
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼己英。
范例
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
注意：使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作间螟，但在 Internet Explorer 10 中無法正常工作。 IE10不再支持條件注釋
c.CSS hack
由于不同廠商的瀏覽器剧辐，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等寒亥，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7荧关，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣褂傀，得不到我們所需要的頁面效果忍啤。
這個(gè)時(shí)候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面
CSS Hack大致有3種表現(xiàn)形式
CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack同波，實(shí)際項(xiàng)目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的鳄梅。
- 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "未檩，但不能識別下劃線""戴尸，IE6~IE10都認(rèn)識"\9"，但firefox前述三個(gè)都不能認(rèn)識
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
選擇器前綴法(即選擇器Hack),例如 IE6能識別html .class{}冤狡，IE7能識別+html .class{}或者*:first-child+html .class{}
IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 孙蒙，針對IE6及以下版本：。這類Hack不僅對CSS生效悲雳，對寫在判斷語句里面的所有代碼都會生效
常見hack寫法
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
瀏覽器兼容處理范例：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
2.常見屬性的兼容情況
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圓角: >= ie9
陰影: >= ie9
動畫/漸變: >= ie10
查找方法
caniuse.com （主要是看IE挎峦，IE更新版本太慢了，鄙視它：掀啊）
屬性兼容處理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
3.一些好用的工具
js能力檢測它的目標(biāo)是識別瀏覽器的能力坦胶，在實(shí)際開發(fā)中，應(yīng)該將能力檢測作為確定下一步解決方案的依據(jù)晴楔，而不是用他來判斷用戶使用的是什么瀏覽器
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
var hasDOM1 = !!(document.getElementById && document.getElementsByTagName && document.createElement);
述代碼一個(gè)是用來確定瀏覽器是否支持 Netscapte 風(fēng)格的插件顿苇；另一個(gè)是用來確定瀏覽器是否具備 DOM1 級所規(guī)定的能力。
html5shiv.js就是通過document.createElement 税弃，HTML5shiv就是這樣一個(gè)js插件岖圈，將所有HTML5的標(biāo)簽進(jìn)行了重新生成，你需要加載該插件钙皮，那么HTML5程序就能被所有瀏覽器識別了
注意：要將代碼復(fù)制到head部分蜂科，記住一定要是head部分（因?yàn)镮E必須在元素解析前知道這個(gè)元素，所以這個(gè)js文件不能在其他位置調(diào)用短条，否則失效）
html5shiv.js
respond.js是提供快速輕量級（3kb大小/ 1kb gzip壓縮）腳本导匣，以便在不支持CSS3媒體查詢的瀏覽器中啟用響應(yīng)式網(wǎng)頁設(shè)計(jì) - 尤其是Internet Explorer 8及以下版本。它的編寫方式可能會補(bǔ)充對其他不支持的瀏覽器的支持茸时。
原理：
腳本通過頁面中引用的CSS循環(huán)贡定，并在其內(nèi)容上運(yùn)行正則表達(dá)式或兩個(gè)正則表達(dá)式來查找媒體查詢及其關(guān)聯(lián)的CSS塊。在Internet Explorer中可都，樣式表的內(nèi)容無法在其預(yù)分析狀態(tài)下進(jìn)行檢索（在IE 8中缓待，它的媒體查詢已從文本中刪除），因此Respond.js使用Ajax重新請求CSS文件渠牲，從那里解析文本響應(yīng)旋炒。一定要正確配置CSS文件的緩存，以便這個(gè)重新請求不會真正進(jìn)入服務(wù)器签杈，而是點(diǎn)擊瀏覽器緩存瘫镇。
從那里，每個(gè)媒體查詢塊通過樣式元素被順序追加到頭部，并且這些樣式元素被啟用和禁用（讀认吵：從DOM添加并移除）谚咬，取決于它們的最小/最大寬度與瀏覽器寬度的比較。樣式元素上的媒體屬性將與CSS中的查詢匹配尚粘，因此它可以是“屏幕”择卦，“投影儀”或任何你想要的。CSS中包含的任何相對路徑將以其樣式表的href作為前綴郎嫁，因此圖像路徑將直接指向其正確的目的地
respond.js
重置CSS：重置樣式表的目標(biāo)是減少瀏覽器在缺省行高秉继，標(biāo)題頁邊距和字體大小等方面的不一致性。
基本所有瀏覽器都有默認(rèn)顯示行剂，但許多瀏覽器沒有有相同的默認(rèn)值秕噪。（同行是冤家）
CSS的作用是修改文檔的默認(rèn)外觀 ，通過使用“重置”樣式表厚宰，我們可以使這種默認(rèn)外觀在各種瀏覽器中更加一致腌巾，因此可以減少與瀏覽器默認(rèn)設(shè)置對抗。
css reset
Normalize.css 是一個(gè)可以定制的CSS文件铲觉，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一澈蝙。
不同的瀏覽器在對于CSS還未定義的一些樣式屬性是不一樣的，這個(gè)CSS的功能就是對幾乎所有的默認(rèn)樣式進(jìn)行重置撵幽，讓所有的瀏覽器上對于未定義的樣式瀏覽效果達(dá)到一致（雖然說無法完全一致灯荧，但至少可以消除掉大部分差距）。它保留有用的默認(rèn)值盐杂，不同于許多 CSS 的重置標(biāo)準(zhǔn)化的樣式逗载，適用范圍廣的元素。糾正錯(cuò)誤和常見的瀏覽器的不一致性链烈。一些細(xì)微的改進(jìn)，提高了易用性强衡。使用詳細(xì)的注釋來解釋代碼擦秽。
normalize.css
Modernizr：Modernizr是一個(gè)JavaScript庫，用于檢測用戶瀏覽器中的HTML5和CSS3功能漩勤。
Modernizr測試當(dāng)前UA中哪些原生CSS3和HTML5功能可用感挥，并通過兩種方式向您提供結(jié)果：全局Modernizr對象上的屬性以及<html>元素上的類。通過這個(gè)庫我們可以檢測不同的瀏覽器對于HTML5特性的支持情況越败。Modernizr 會在頁面加載后立即檢測特性触幼，然后創(chuàng)建一個(gè)包含檢測結(jié)果的JavaScript 對象，同時(shí)在 html元素中加入方便你調(diào)整 css 的 class 名眉尸。
Modernizr（推薦使用）
PostCSS是一個(gè)用JS插件轉(zhuǎn)換樣式的工具域蜗。這些插件可以欺騙你的CSS巨双，支持變量和mixins噪猾，轉(zhuǎn)載未來的CSS語法霉祸，內(nèi)聯(lián)圖像等等。
PostCSS使CSS變成JavaScript的數(shù)據(jù)袱蜡，使它變成可操作丝蹭。PostCSS是基于JavaScript插件，然后執(zhí)行代碼操作坪蚁。它可以直觀地理解為一個(gè)平臺奔穿，可以讓一些插件在上面跑，它提供了一個(gè)解析器敏晤，可以將CSS解析成抽象語法樹贱田，通過PostCSS，我們能夠開發(fā)一些插件嘴脾，來處理CSS男摧。
作者：彭榮輝
鏈接：http://www.reibang.com/u/0f804364a8a8
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)译打，非商業(yè)轉(zhuǎn)載請注明出處耗拓。
