同一份代碼，有的瀏覽器效果正常恕刘，但有的瀏覽器效果無法達(dá)到預(yù)期，這時(shí)就是出現(xiàn)了瀏覽器不兼容的問題抒倚。
這種問題常常是因?yàn)椴煌a(chǎn)品的標(biāo)準(zhǔn)褐着、實(shí)現(xiàn)方式不同，或是不同的時(shí)間出現(xiàn)的瀏覽器版本存在的bug托呕、實(shí)現(xiàn)的功能都不同而產(chǎn)生的含蓉。
1. CSS hack
在遇到兼容問題時(shí)，針對(duì)不同瀏覽器去寫不容的CSS项郊，讓它能在不同瀏覽器中獲得相同的效果馅扣。
CSS Hack 大致有三種表現(xiàn)形式：CSS屬性前綴法、選擇器前綴法着降、IE條件注釋法差油。
例如：
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie6 7*/
color: yellow\9; /*ie/edge 6-8*/
}
2. 瀏覽器兼容的思路
1). 一般考慮瀏覽器兼容問題的流程
要不要做
產(chǎn)品的角度——產(chǎn)品的受眾、受眾的瀏覽器比例任洞、效果和基本功能哪個(gè)優(yōu)先
成本的角度——有沒有必要實(shí)現(xiàn)做到什么程度
讓哪些瀏覽器支持哪些效果如何做
根據(jù)兼容需求選擇技術(shù)框架/庫（jQuery）
根據(jù)兼容需求選擇兼容工具
postCSS
條件注釋蓄喇、CSS Hack、JS 能力檢測(cè)來做修補(bǔ)
2).兩種常見的瀏覽器兼容思路：
** 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)：**
- 漸進(jìn)增強(qiáng) —— 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面侈咕，保證基本功能公罕，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)耀销。
- 優(yōu)雅降級(jí) —— 一開始就構(gòu)建完整的功能楼眷，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
3. 常見的5種瀏覽器兼容的寫法
- 條件注釋：
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->
- 屬性選擇器
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie6 7*/
color: yellow\9; /*ie/edge 6-8*/
}
- 選擇器前綴法
*html //只對(duì)IE6生效
*+html //只對(duì)IE7生效
@media screen\9{...} //只對(duì)IE6 7生效
- 條件注釋結(jié)合類選擇器
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
- 利用Modernizr工具
4. 瀏覽器兼容相關(guān)常見工具/名詞：
-
條件注釋
在HTML源碼中被IE有條件解釋的語句熊尉，可被用來向IE提供及隱藏代碼罐柳。
但使用了條件注釋的頁面只能在IE9中正常工作，IE10不再支持條件注釋狰住。
| 項(xiàng)目 | 范例 | 說明 |
|---|---|---|
| ! | [if !IE] | 非IE |
| il | [if lt IE 5] | 小于IE5 |
| lte | [if lte IE6] | 小于等于IE6 |
| gt | [if gt IE5] | 大于IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
| | | [if (IE6)l(IE7)] | IE6或者IE7 |
IE Hack
針對(duì)不同的IE瀏覽器編寫不同的CSS张吉，從而使IE能夠渲染出預(yù)期效果的過程。js 能力檢測(cè)
使用JS的語法檢測(cè)瀏覽器支持的屬性催植，以便展示效果html5shiv.js
用來在 IE6肮蛹、7、8 中模擬實(shí)現(xiàn) html5 的標(biāo)簽创南，以實(shí)現(xiàn)對(duì) IE 6伦忠、7、8 的兼容respond.js
在IE6稿辙、7中模擬實(shí)現(xiàn)CSS3的媒體查詢昆码，實(shí)現(xiàn)響應(yīng)式css reset
用來完全去除瀏覽器的默認(rèn)樣式normalize.css
是css reset的改良版，在css reset的基礎(chǔ)上保護(hù)有用的瀏覽器默認(rèn)樣式、為大部分HTML元素提供一般化的樣式赋咽、修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性旧噪、使用一些小技巧優(yōu)化CSS可用性、用注釋和詳細(xì)的文檔來解釋代碼脓匿。Modernizr
Modernizr是一個(gè) JavaScript 庫淘钟，用于檢測(cè)用戶瀏覽器的 HTML5 與 CSS3 特性postCSS
PostCSS是一個(gè)JS插件轉(zhuǎn)換樣式表的工具，這些插件能夠檢驗(yàn)?zāi)愕腃SS亦镶、支持變量和混合日月，轉(zhuǎn)化css3的新特性語法、行內(nèi)圖片等缤骨。
5. 一般在哪個(gè)網(wǎng)站查詢屬性兼容性？
可以使用 caniuse.com來查詢CSS屬性兼容情況尺借，使用browserhacks.com來查詢?yōu)g覽器兼容的寫法绊起。
