同一份代碼，有的瀏覽器效果正常，但有的瀏覽器效果無法達到預期，這時就是出現(xiàn)了瀏覽器不兼容的問題。
這種問題常常是因為不同產(chǎn)品的標準、實現(xiàn)方式不同，或是不同的時間出現(xiàn)的瀏覽器版本存在的bug、實現(xiàn)的功能都不同而產(chǎn)生的。
1. CSS hack
在遇到兼容問題時，針對不同瀏覽器去寫不容的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)品的受眾、受眾的瀏覽器比例、效果和基本功能哪個優(yōu)先
成本的角度——有沒有必要實現(xiàn)做到什么程度
讓哪些瀏覽器支持哪些效果如何做
根據(jù)兼容需求選擇技術框架/庫（jQuery）
根據(jù)兼容需求選擇兼容工具
postCSS
條件注釋、CSS Hack、JS 能力檢測來做修補
2).兩種常見的瀏覽器兼容思路：
** 漸進增強和優(yōu)雅降級：**
- 漸進增強 —— 針對低版本瀏覽器進行構建頁面，保證基本功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
- 優(yōu)雅降級 —— 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
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 //只對IE6生效
*+html //只對IE7生效
@media screen\9{...} //只對IE6 7生效
- 條件注釋結合類選擇器
<!--[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. 瀏覽器兼容相關常見工具/名詞：
-
條件注釋
在HTML源碼中被IE有條件解釋的語句，可被用來向IE提供及隱藏代碼。
但使用了條件注釋的頁面只能在IE9中正常工作，IE10不再支持條件注釋。
| 項目 | 范例 | 說明 |
|---|---|---|
| ! | [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
針對不同的IE瀏覽器編寫不同的CSS，從而使IE能夠渲染出預期效果的過程。js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性，以便展示效果html5shiv.js
用來在 IE6、7、8 中模擬實現(xiàn) html5 的標簽，以實現(xiàn)對 IE 6、7、8 的兼容respond.js
在IE6、7中模擬實現(xiàn)CSS3的媒體查詢，實現(xiàn)響應式css reset
用來完全去除瀏覽器的默認樣式normalize.css
是css reset的改良版，在css reset的基礎上保護有用的瀏覽器默認樣式、為大部分HTML元素提供一般化的樣式、修復瀏覽器自身的bug并保證各瀏覽器的一致性、使用一些小技巧優(yōu)化CSS可用性、用注釋和詳細的文檔來解釋代碼。Modernizr
Modernizr是一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性postCSS
PostCSS是一個JS插件轉換樣式表的工具，這些插件能夠檢驗你的CSS、支持變量和混合，轉化css3的新特性語法、行內圖片等。
5. 一般在哪個網(wǎng)站查詢屬性兼容性？
可以使用 caniuse.com來查詢CSS屬性兼容情況，使用browserhacks.com來查詢?yōu)g覽器兼容的寫法。
