CSS hack
由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack!
瀏覽器兼容的思路
- 根據(jù)用戶瀏覽器使用情況考慮要不要做
- 需要適配哪些瀏覽器以及相應(yīng)的版本
- 不同瀏覽器上的顯示效果不一樣，做到哪種程度 //因為有些屬性某些瀏覽器并不支持
- 選擇需要的兼容工具
瀏覽器兼容的寫法
CSS屬性前綴法：
.container{
_color: red;/*IE6識別*/
*color: red;/*IE6,IE7識別*/
color: red\9;/*IE6-IE10識別*/
color: red\0;/*IE8-IE10識別*/
color: red\9\0;/*IE9,IE10識別*/
}
選擇器前綴法：
*html{}/*只對IE6生效*/
*+html{}/*只對IE7生效*/
@media screen\9{...} //IE6-7生效
IE條件注釋法（即HTML頭部引用if IE）：
CSS3選擇器結(jié)合JavaScript
irefox 瀏覽器css hack
@-moz-document url-prefix() {
.selector { property: value; }
}
支持所有Gecko內(nèi)核的瀏覽器 (包括Firefox)
*>.selector { property: value; }
Webkit 內(nèi)核瀏覽器 css hack
@media screen and (-webkit-min-device-pixel-ratio: 0) {
Selector { property: value; }
}
Opera 瀏覽器css hack
html:first-child>b\ody Selector {property:value;}
@media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }
Webkit 內(nèi)核瀏覽器 css hack和Opera 瀏覽器css hack
@media all and (min-width:0px){ .font1 {color:red;} }
解釋
條件注釋
以小于符號+嘆號+兩個減號開始 兩個減號大于符號結(jié)束構(gòu)成(字符均為英文小寫輸入)，而注解注釋內(nèi)容放入其中。
它會根據(jù)瀏覽器的不同選擇性地給<html>標(biāo)記添加（或不添加）一個包含瀏覽器版本信息的class屬性。
IE Hack
<!--[if !IE]>除IE外都可識別<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
JS 能力檢測
瀏覽器提供商雖然在實現(xiàn)公共接口方面投入了很多精力，但結(jié)果仍然是每一種瀏覽器都有各自
的長處，也都有各自的缺點。即使是那些跨平臺的瀏覽器，雖然從技術(shù)上看版本相同，也照
樣存在不一致性問題。
能力檢測的目標(biāo)不是識別特定的瀏覽器，而是識別瀏覽器的能力。采用這種方式不必顧及特定的瀏覽器如何如何，只要確定瀏覽器支持特定的能力，就可以給出解決方案。
能力檢測的基本模式如下：
if(object.property) {
//存在該屬性或方法，使用object.property
}
html5shiv.js
ie低版本不支持html5標(biāo)簽，可以引入一段腳本，在ie瀏覽器中創(chuàng)建html5的標(biāo)簽。
HTML5 Shiv是JavaScript的一種備選方案。該方案在Internet Explorer 9版本中優(yōu)先啟用HTML5元素樣式，但不允許使用沒有由JavaScript定義過的元素樣式。
respond.js
Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
就是說在IE6~8瀏覽器中兼容響應(yīng)式布局。
css reset
所有的 HTML 標(biāo)簽在沒有設(shè)置樣式時均被瀏覽器默認(rèn)的樣式列表所裝飾 （不同瀏覽器默認(rèn)樣式有所不同）。CSS 的樣式重置就是清楚瀏覽器的默認(rèn)樣式 ，可以理解為對于全局的樣式定義。
通過為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。
Normalize.css
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
優(yōu)化CSS可用性：用一些小技巧
Modernizr
Modernizr是一套JavaScript 庫，用來偵測瀏覽器是否支持HTML5與CSS3等規(guī)格。如果瀏覽器不支持，Modernizr會使用其他的解決方法來進(jìn)行模擬。
許多HTML5與CSS 3的功能已經(jīng)在許多主流的瀏覽器中實現(xiàn)出來。Modernizr能夠告訴開發(fā)者，瀏覽器是否已經(jīng)實現(xiàn)他們想要的功能。這讓開發(fā)者在瀏覽器上可以充分利用這些新功能，或者嘗試制作解決方案來支持那些老舊的瀏覽器。
PostCSS
PostCSS 使用 JavaScript 代碼來轉(zhuǎn)換 CSS 中的樣式。PostCSS 通過不同的插件來支持對 CSS 的不同處理。PostCSS 的插件可以完成各種不同的功能，如支持變量和混入，支持未來的 CSS 語法和添加瀏覽器特定前綴等。
屬性兼容性
caniuse.com是一個工具性的網(wǎng)站，幫助人們了解各個瀏覽器以及它們的不同版本對HTML5、CSS3等高級特性的支持情況，幫助網(wǎng)站設(shè)計人員根據(jù)網(wǎng)站針對的用戶有選擇的使用web設(shè)計高級特性，提高用戶體驗。
