1. 什么是 CSS hack
由于不同廠商的瀏覽器师妙，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等疼阔，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣平酿，得不到我們所需要的頁(yè)面效果。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS悦陋，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果蜈彼。
2. 處理瀏覽器兼容的思路
2.1 先確定要不要兼容
- 產(chǎn)品的角度
（產(chǎn)品的受眾、受眾的瀏覽器比例俺驶、效果優(yōu)先還是基本功能優(yōu)先）
如果受眾是銀行幸逆、傳統(tǒng)企業(yè)、政府部門(mén)，需兼容IE6 7
如果受眾是年輕群體秉颗，可不考慮兼容IE6 7 - 成本的角度 (有無(wú)必要做某件事)
在某些舊版本瀏覽器上實(shí)現(xiàn)某些功能所花費(fèi)的代價(jià)
2.2 做到什么程度痢毒，
- 兼容到哪個(gè)版本
- 讓哪些瀏覽器支持哪些效果
2.3 如何做
根據(jù)兼容需求選擇技術(shù)框架/庫(kù)（jquery）
Bootstrap （>= IE8）
jQuery 1.~ (>=IE6) jQuery 2.~ (>=IE9)
Vue (>=IE9)根據(jù)兼容需求選擇兼容工具
html5shiv.js
respond.js
css reset
normalize.css
Modernizr條件注釋、CSS Hack蚕甥、js 能力檢測(cè)做一些修補(bǔ)
漸進(jìn)增強(qiáng)(progressive enhancement):
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面哪替，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果菇怀、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
確保最基本的功能凭舶，然后做出更好的效果，適用于受眾為IE6 7的客戶
優(yōu)雅降級(jí) (graceful degradation):
一開(kāi)始就構(gòu)建完整的功能爱沟，然后再針對(duì)低版本瀏覽器進(jìn)行兼容帅霜。
確保高端瀏覽器的效果，然后盡可能去覆蓋低版本瀏覽器
3. 列舉5種以上瀏覽器兼容的寫(xiě)法
3.1 條件注釋 （適用于IE 6 7 8 9呼伸，但是IE10開(kāi)始不再支持條件注釋）
<!--[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]-->
3.2 CSS hack屬性前綴法
利用 IE6能識(shí)別下劃線和星號(hào)身冀，IE7能識(shí)別星號(hào)，但不能識(shí)別下劃線""括享，IE6~IE10都認(rèn)識(shí)“\9”的特性搂根，給屬性前面加上特定瀏覽器能識(shí)別的字符，以實(shí)現(xiàn)對(duì)特定瀏覽器的兼容
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
3.3 CSS hack選擇器前綴法
利用 IE6能識(shí)別下劃線和星號(hào)铃辖，IE7能識(shí)別星號(hào)剩愧，但不能識(shí)別下劃線""，IE6~IE10都認(rèn)識(shí)“\9”的特性娇斩，給選擇器前面加上特定瀏覽器能識(shí)別的字符仁卷，以實(shí)現(xiàn)對(duì)特定瀏覽器的兼容
*h1{
color: red;
}
3.4 使用Modernizr
3.5 使用html5shiv.js
4. 以下工具/名詞是做什么的
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼犬第。
適用于優(yōu)雅降級(jí)向下兼容锦积，使其兼容IE6 IE7 IE8
- IE Hack
針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果歉嗓，主要有
1 屬性前綴法
利用不同瀏覽器的bug來(lái)識(shí)別瀏覽器充包，然后對(duì)該瀏覽器加入樣式
如IE6能識(shí)別下劃線"_和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "遥椿，但不能識(shí)別下劃線""，IE6~IE10都認(rèn)識(shí)"\9"
2 選擇器前綴法
3 IE條件注釋法 - js 能力檢測(cè)
能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器淆储，而是識(shí)別瀏覽器的能力冠场。使用這種方式無(wú)需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力本砰，就可以給出相關(guān)的方案碴裙。 - html5shiv.js
解決IE6 7 8 Safari 4.x （iPhone 3.x） 以及Firefox 3.x不支持html5的新特性和新標(biāo)簽問(wèn)題 - respond.js
在IE6 7 8上模擬CSS3的媒體查詢功能 - css reset
通過(guò)CSS重置瀏覽器默認(rèn)樣式 - normalize.css
Normalize.css是一種CSS reset的替代方案，是溫和版的CSS reset。在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性舔株。
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
為大部分HTML元素提供統(tǒng)一化樣式
修復(fù)了常見(jiàn)的桌面端和移動(dòng)端瀏覽器的bug并保證各瀏覽器的一致性
用一些小技巧優(yōu)化CSS可用性
用注釋和詳細(xì)的文檔來(lái)解釋代碼 - Modernizr
瀏覽器功能檢測(cè)以確定瀏覽器是否支持各種html5和css3特性莺琳，引用Modernizr生效之后，它會(huì)給html元素添加一批css的class名稱载慈，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性惭等，支持的特性就直接顯示該天特性的名稱作為一個(gè)class（例如:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”（例如：no-flexbox）办铡。這樣我們?cè)趯?xiě)CSS的時(shí)候就可以直接使用Modernizr在<html>元素里生成的class名稱辞做，定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器。 - postCSS
PostCSS 本身是一個(gè)工具寡具。它提供了一種方式用 JavaScript 代碼來(lái)處理 CSS秤茅。它負(fù)責(zé)把 CSS 代碼解析成抽象語(yǔ)法樹(shù)結(jié)構(gòu)（Abstract Syntax Tree，AST）童叠，再交由插件來(lái)進(jìn)行處理框喳。插件基于 CSS 代碼的 AST 所能進(jìn)行的操作是多種多樣的，比如可以支持變量和混入（mixin）厦坛，增加瀏覽器相關(guān)的聲明前綴五垮，或是把使用將來(lái)的 CSS 規(guī)范的樣式規(guī)則轉(zhuǎn)譯（transpile）成當(dāng)前的 CSS 規(guī)范支持的格式。從這個(gè)角度來(lái)說(shuō)粪般，PostCSS 的強(qiáng)大之處在于其不斷發(fā)展的插件體系拼余。
5. 一般在哪個(gè)網(wǎng)站查詢屬性兼容性？
caniuse.com：查詢CSS屬性兼容性
browserhacks：查hack的寫(xiě)法
常見(jiàn)屬性的兼容情況：
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圓角: >= ie9
- 陰影: >= ie9
- 動(dòng)畫(huà)/漸變: >= ie10
