什么是 CSS hack
CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。 這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
簡(jiǎn)單的說(shuō)，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然，我們也可以反過(guò)來(lái)利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果
CSS Hack大致有3種表現(xiàn)形式：
- CSS屬性前綴法
- 選擇器前綴法
- IE條件注釋法（即HTML頭部引用if IE）Hack，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
談一談瀏覽器兼容的思路
-
要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無(wú)必要做某件事)
-
做到什么程度
- 讓哪些瀏覽器支持哪些效果
-
如何做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS
- 條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)
列舉5種以上瀏覽器兼容的寫法
屬性前綴法舉例：
.box {
color:red; ?* 所有瀏覽器都支持 *?
color:red !important; ?* Firefox、IE7支持 *?
_color:red; ?* IE6支持 *?
*color:red; ?* IE6、IE7支持 *?
*+color:red; ?* IE7支持 *?
color:red \9; ?* IE6、IE7、IE8支持 *?
color:red \0; ?* IE8支持 *?
}```
**條件注釋**：
用于非 IE
#####以下工具/名詞是做什么的
- **條件注釋**：條件注釋 (conditional comment) 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向 Internet Explorer 提供及隱藏代碼
- **IE Hack**：使用特殊的符號(hào)或者方式寫出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法
- **js 能力檢測(cè)**：使用JS的語(yǔ)法檢測(cè)瀏覽器支持的屬性，以便展示效果
- **html5shiv.js**：用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題。
- **respond.js**：讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
- **css reset**：通過(guò)重新定義標(biāo)簽樣式，“覆蓋”瀏覽器的CSS默認(rèn)屬性
- **normalize.css**：Normalize.css 只是一個(gè)很小的CSS文件，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。
- **Modernizr**：Modernizr是一個(gè) JavaScript 庫(kù)，用于檢測(cè)用戶瀏覽器的 HTML5 與 CSS3 特性。
- **postCSS**：它可以被理解為一個(gè)平臺(tái)，可以讓一些插件在上面跑，它提供了一個(gè)解析器，可以將CSS解析成抽象語(yǔ)法樹，通過(guò)PostCSS這個(gè)平臺(tái)，我們能夠開發(fā)一些插件，來(lái)處理CSS。熱門插件如autoprefixer，它可以幫我們處理兼容問(wèn)題，只需正常寫CSS，autoprefixer可以幫我的自動(dòng)生成兼容性代碼
#####一般在哪個(gè)網(wǎng)站查詢屬性兼容性？
[**caniuse**](http://caniuse.com/) :查css屬性 選擇器在各瀏覽器的兼容。
[**browserhacks**](http://browserhacks.com/):查css屬性 選擇器在各瀏覽器Hack的寫法