1.什么是 CSS hack？
以下是引自百度文庫的定義：
簡單地講，css hack指各版本及各品牌瀏覽器之間對CSS解釋后出現(xiàn)網(wǎng)頁內(nèi)容的誤差(比如我們常說錯位)的處理。由于各瀏覽器的內(nèi)核不同，所以會造成一些誤差就像JS一樣，一個JS網(wǎng)頁特效，在微軟IE6、IE7、IE8瀏覽器有效果，但可能在火狐（Mozilla Firefox）谷歌瀏覽器無效，這樣就叫做JS hack ，所以我們對于CSS來說他們來解決各瀏覽器對CSS解釋不同所采取的區(qū)別不同瀏覽器制作不同的CSS樣式的設(shè)置來解決這些問題就叫作CSS Hack。
也就是說：
CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號，以達(dá)到應(yīng)用不同的CSS樣式的目的，比如```
.kwstu{width:300px;_width:200px;}
2.談一談瀏覽器兼容的思路
---
首先，為什么會有瀏覽器兼容問題？
- 同一產(chǎn)品，版本越老 bug 越多
- 同一產(chǎn)品，版本越新，功能越多
- 不同產(chǎn)品，不同標(biāo)準(zhǔn)，不同實現(xiàn)方式
- 用到的網(wǎng)站
[瀏覽器市場份額](http://#baidu.com/data/browser)
[caniuse.com](http://caniuse.com/) “查CSS屬性兼容”
[browserhacks](http://browserhacks.com/) “查 Hack 的寫法”
明白了為什么會有瀏覽器兼容問題，我們現(xiàn)在來說說瀏覽器兼容的思路：
1. 可行性分析：
產(chǎn)品的市場定位：例如，產(chǎn)品的受眾群體、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先
產(chǎn)品的成本角度：有無必要做某件事，例如，有沒有必要在IE6，7中使用圓角，陰影這些效果，而去花費大量成本。
2. 做到什么程度：
- 讓哪些瀏覽器支持哪些效果。
3. 如何做根據(jù)兼容需求選擇技術(shù)框架/庫(jQuery)
根據(jù)兼容需求選擇兼容工具([html5shiv.js](https://github.com/aFarkas/html5shiv)、[respond.js](https://github.com/scottjehl/Respond)、[css reset](https://segmentfault.com/a/1190000003021766)、[normalize.css](https://github.com/necolas/normalize.css)、[Modernizr](https://github.com/Modernizr/Modernizr))
[postCSS](https://github.com/postcss/postcss)
條件注釋、CSS Hack、js 能力檢測做一些修補(bǔ)
4. 漸進(jìn)增強(qiáng)和優(yōu)雅降級
漸進(jìn)增強(qiáng)
(progressive enhancement): 針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗
優(yōu)雅降級
(graceful degradation): 一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。
[stackoverflow-漸進(jìn)增強(qiáng)和優(yōu)雅降級的區(qū)別](http://stackoverflow.com/questions/2550431/what-is-the-difference-between-progressive-enhancement-and-graceful-degradation)
3. 列舉5種以上瀏覽器兼容的寫法
---
1. 條件注釋：
```html
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![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
| [if (IE 6)|(IE 7)] IE6或者IE7
- 屬性選擇器
box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 選擇器前綴法
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等
- 條件注釋結(jié)合類選擇器整體優(yōu)化
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
這樣在CSS中就不用在屬性前面加等一些亂七八糟的前綴*
- 利用Modernizr工具
Modernizr
當(dāng)你在網(wǎng)頁中嵌入Modernizr的腳本時，它會檢測當(dāng)前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時也會檢測是否支持HTML5的特性——比如audio、video、本地儲存、和新的 標(biāo)簽的類型和屬性等。在獲取到這些信息的基礎(chǔ)上，你可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創(chuàng)建一個基于JS的fallback，或者對那些不支持的瀏覽器進(jìn)行簡單的優(yōu)雅降級。另外，Modernizr還可以令I(lǐng)E支持對HTML5的元素應(yīng)用CSS樣式，這樣開發(fā)者就可以立即使用這些更富有語義化的標(biāo)簽了。
參考文章
可以直接使用Modernizr在元素里生成的class名稱，在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器。例如，下面的代碼，在支持shadow陰影的瀏覽器顯示shadow，不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框：
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}
參考資料:史上最全的CSS hack方式一覽
- 以下工具/名詞是做什么的
條件注釋:是HTML源碼中被 IE 有條件解釋的語句。條件注釋可被用來向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)，并且直至 Internet Explorer 9 均支持。微軟已宣布于IE10停止支持。
IE Hack:針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程.
js 能力檢測:不同瀏覽器支持的js方法不同，封裝函數(shù)解決或?qū)ο蠼鉀Q兼容性問題
html5shiv.js:用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別，并導(dǎo)致CSS不起作用的問題
respond.js:讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持媒體查詢
css reset:將瀏覽器的默認(rèn)樣式全部去掉，就是通過重新定義標(biāo)簽樣式?！案采w”瀏覽器的CSS默認(rèn)屬性。
normalize.css:是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。保留有用的默認(rèn)值，不同于許多 CSS 的重置；標(biāo)準(zhǔn)化的樣式，適用范圍廣的元素；糾正錯誤和常見的瀏覽器的不一致性；一些細(xì)微的改進(jìn)，提高了易用性；使用詳細(xì)的注釋來解釋代碼。
Modernizr: Modernizr 是一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案。
工作原理
Modernizr 會在頁面加載后立即檢測特性；然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象，同時在 html 元素加入方便你調(diào)整 CSS 的 class 名。postCSS: PostCSS 是使用 JS 插件來轉(zhuǎn)換 CSS 的工具，支持變量，混入，未來 CSS 語法，內(nèi)聯(lián)圖像等等。
PostCSS 包括 CSS 解析器，CSS 節(jié)點樹 API，一個源映射生成器和一個節(jié)點樹 stringifier。
PostCSS是CSS變成JavaScript的數(shù)據(jù)，使它變成可操作。PostCSS是基于JavaScript插件，然后執(zhí)行代碼操作。PostCSS自身并不會改變CSS，它只是一種插件，為執(zhí)行任何的轉(zhuǎn)變鋪平道路。
- 一般在哪個網(wǎng)站查詢屬性兼容性？
