1、什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
2、談一談瀏覽器兼容的思路
-
首先考慮一下瀏覽器的兼容是否真的有必要做：
- 產(chǎn)品的面向人群和使用機(jī)構(gòu)是否有必要去兼容IE678，其次需要考慮一下產(chǎn)品的功能是什么，是效果優(yōu)先還是功能優(yōu)先，不要盲目的做全部瀏覽器的兼容，那樣后期維護(hù)成本可能會(huì)非常大。
- 我們需要考慮一下這件事的必要性，這個(gè)產(chǎn)品是否做瀏覽器兼容成本比較高？是不是可以不用向下兼容那么多瀏覽器？
第二步我們需要考慮兼容性做到什么程度？
我們可以參考項(xiàng)目的完成工期查看一下網(wǎng)站 http://#baidu.com/data/browser 來(lái)查看用戶的瀏覽器份額，根據(jù)產(chǎn)品的使用機(jī)構(gòu)來(lái)確定要做到什么程度，需要讓哪些瀏覽器來(lái)做到什么程度的效果。最后需要考慮怎樣做瀏覽器兼容
根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)、postCSS、條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)。
3、列舉5種以上瀏覽器兼容的寫法
- IE6，7，8，9都可以識(shí)別寫法\9，如：
.one{
background: yellow\9; //ie6789
}
one{
*color: pink; //ie67
}
.one{
_margin-top:20px; //ie6
}
- 選擇器前綴法(即選擇器Hack)
*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效
@media screen\9{...}只對(duì)IE6/7生效
@media \0screen {body { background: red; }}只對(duì)IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效等等
- 針對(duì)火狐瀏覽器：-moz-前綴，如：-moz-background-size；
- 針對(duì)歐朋瀏覽器：-o-前綴，如：-o-background-size；
- 針對(duì)谷歌瀏覽器：-webkit-前綴，如：-webkit-background-size；
- 針對(duì)IE瀏覽器：-ms-前綴，如：-ms-background-size；
- 針對(duì)IE10以下版本的IE瀏覽器，可以使用條件注釋的方法添加你需要的文件鏈接，如：
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="ie7only.css" rel="stylesheet">
<![endif]-->
全部的瀏覽器兼容寫法：
| 項(xiàng)目 | 范例 | 說(shuō)明 | |
|---|---|---|---|
| ！ | [if !IE] | 非IE | |
| lt | [if lt IE 6] | 小于IE 6 | |
| lte | [if lte IE 6] | 小于等于IE 6 | |
| gt | [if gt IE 7] | 大于IE 7 | |
| gte | [if gte IE 6] | 大于等于IE 6 | |
| > | 符號(hào) 寫法：[if (IE 6) | (IE 7)] 代表IE6或者IE7（markdown表格寫法出現(xiàn) | 后會(huì)有bug這時(shí)兼容寫法的最后一條。） |
4、以下工具/名詞是做什么的
條件注釋
條件注釋 (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的瀏覽器包括IE低版本等其他瀏覽器支持查詢。
css reset
通過(guò)重新定義標(biāo)簽樣式，“覆蓋”瀏覽器的CSS默認(rèn)屬性,，這種方式比較暴力，是去掉所有的標(biāo)簽?zāi)J(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ì)替代方案，因?yàn)樗嗟氖恰案牧肌睒?biāo)簽?zāi)J(rèn)樣式，而不是暴力的去掉全部的樣式，相對(duì)來(lái)說(shuō)更加友好。
Modernizr
Modernizr是一個(gè) JavaScript 庫(kù)，用于檢測(cè)用戶瀏覽器的 HTML5 與 CSS3 特性。然后根據(jù)其判斷的兼容性來(lái)重寫不同版本的瀏覽器下頁(yè)面的展示元素和樣式。
postCSS
PostCSS是一個(gè)JS插件轉(zhuǎn)換樣式表的工具。這些插件能夠檢驗(yàn)?zāi)愕腃SS、支持變量和混合，轉(zhuǎn)化css3的新特性語(yǔ)法、行內(nèi)圖片等。
查詢?yōu)g覽器兼容性可以用 caniuse.com。
