什么是 CSS hack
CSS hack由于不同廠商的瀏覽器寄猩，或者是同一廠商的瀏覽器的不同版本观谦，如IE6和IE7绑改，對CSS的解析認識不完全一樣蛙吏，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果稽物。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS奄毡，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
談一談瀏覽器兼容的思路
（1）要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾贝或、受眾的瀏覽器比例吼过、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無必要做某件事)
（2）做到什么程度
- 讓哪些瀏覽器支持哪些效果
（3）如何做
- 根據(jù)兼容需求選擇技術框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js咪奖、css reset盗忱、normalize.css、Modernizr)
- postCSS
- 條件注釋羊赵、CSS Hack售淡、js 能力檢測做一些修補
列舉5種以上瀏覽器兼容的寫法
- 合適的框架
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
- 條件注釋
條件注釋是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作揖闸，但在 Internet Explorer 10 中無法正常工作揍堕。
<!--[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]-->
| 項目 | 范例 | 說明 |
|---|---|---|
| ！ | [if !IE] | 非IE |
| lt | [if lt IE 5.5] | 小于IE 5.5 |
| lte | [if lte IE 6] | 小于等于IE6 |
| gt | [if gt IE 5] | 大于 IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
| l | [if (IE 6)l(IE 7)] | IE6或者IE7 |
CSS屬性前綴法
即類內(nèi)部Hack：例如 IE6能識別下劃線""和星號" * "汤纸，IE7能識別星號" * "衩茸，但不能識別下劃線""，IE6~IE10都認識"\9"贮泞，但firefox前述三個都不能認識楞慈。選擇器前綴法
即選擇器Hack：選擇器前綴法是針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack啃擦。IE條件注釋法
即HTML條件注釋Hack：
針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 囊蓝，針對IE6及以下版本：。這類Hack不僅對CSS生效令蛉，對寫在判斷語句里面的所有代碼都會生效聚霜。使用兼容開發(fā)工具
- html5shiv.js：在IE6~8（不支持HTML5標簽）上模擬HTML5標簽。
- respond.js：在IE6~8（不支持CCS3）上模擬CSS3 Media Queries珠叔。
- CSS Reset和Normalize.css蝎宇。
- Modernizr.js：他會為瀏覽器的html標簽生成一批css的class名稱，標記當前瀏覽器支持和不支持的特性祷安。利用html標簽上的類名姥芥，就可以為不同版本的不同瀏覽器添加兼容樣式。
以下工具/名詞是做什么的
- 條件注釋
條件注釋是于HTML源碼中被IE有條件解釋的語句汇鞭。條件注釋可被用來向IE提供及隱藏代碼凉唐。
使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作霍骄。
- IE Hack
針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
- js 能力檢測
檢測當前瀏覽器支持和不支持的特性台囱。如Modernizr.js,它會為瀏覽器的html標簽生成一批的css的class名稱，標記當前瀏覽器支持和不支持的特性腕巡。我們利用html標簽上的類名，就可以為不同版本的不同瀏覽器添加兼容樣式血筑。
- html5shiv.js
用于創(chuàng)建標簽的工具绘沉，可在IE6~8（不支持html5標簽）上模擬html5標簽。
- respond.js
是一種css兼容工具豺总。Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢车伞。
- css reset
強制重置瀏覽器默認樣式。使得所有瀏覽器渲染頁面效果一致喻喳。但存在性能問題另玖。
- normalize.css
是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一，并擁有完整的文檔注釋解釋代碼谦去。
- Modernizr
是一種css兼容工具慷丽。他會為瀏覽器的html標簽生成一批的css的class名稱，標記當前瀏覽器支持和不支持的特性鳄哭。我們利用html標簽上的類名要糊，就可以為不同版本的不同瀏覽器添加兼容樣式
- postCSS
是CSS變成JavaScript的數(shù)據(jù)，使它變成可操作妆丘。PostCSS是基于JavaScript插件锄俄，然后執(zhí)行代碼操作。PostCSS自身并不會改變CSS勺拣，它只是一種插件奶赠，為執(zhí)行任何的轉變鋪平道路。
