什么是CSS hack
CSS hack由於不同的瀏覽器，比如IE6,IE7,Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
CSS hack分類
hack主要分為CSS選擇器hack、CSS屬性hack、IE條件注釋hack。
CSS選擇器hack：比如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}等。
CSS屬性hack：比如 IE6能識別下划線"_"和星號" * "，IE7能識別星號" * "，但不能識別下划線"_"，而firefox兩個都不能認識等。
IE條件注釋hack：
針對所有IE：<!--[if IE]><!--您的代碼--><![endif]-->
針對IE6及以下版本：<!--[if lt IE 7]><!--您的代碼--><![endif]-->
這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
書寫順序，一般是將識別能力強的瀏覽器的CSS寫在前面。
用法
比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：
div{ background:green; /* for firefox */ *background:red; /* for IE6 */ (both IE6 && IE7) }
可以看到在IE6中看到是紅色的，在firefox中看到是綠色的。
<!DOCTYPE html> <html> <head> <title>Css Hack</title> <style> #test { width:300px; height:300px; background-color:blue; /*firefox*/ background-color:red\9; /*all ie*/ background-color:yellow\0; /*ie8*/ +background-color:pink; /*ie7*/ _background-color:orange; /*ie6*/ } :root #test { background-color:purple\9; } /*ie9*/ @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/ </style> </head> <body> <div id="test">test</div> </body> </html>
上面這段代碼大家可以直接copy出來，保存成html在各瀏覽器試試。分析：
（1）background-color:blue; 各個瀏覽器都認識，這里給firefox用；
（2）background-color:red\9; \9所有的ie瀏覽器可識別；
（3）background-color:yellow\0; \0 是留給ie8的，但筆者測試，發現最新版opera也認識，汗。。。不過且慢，后面自有hack寫了給opera認的，所以，\0我們就認為是給ie8留的；
（4）+background-color:pink; + ie7定了；
（5）_background-color:orange; _專門留給神奇的ie6；
（6）:root #test { background-color:purple\9; } :root是給ie9的，網上流傳了個版本是 :root #test { background-color:purple\0;}，新版opera也認識，所以經筆者反復驗證最終ie9特有的為:root 選擇符 {屬性\9;}
（7）@media all and (min-width:0px){ #test {background-color:black\0;} } 這個是老是跟ie搶着認\0的神奇的opera，必須加個\0,不然firefox，chrome，safari也都認識。。。
（8）@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個是瀏覽器新貴chrome和safari的。
| 瀏覽器 | CSS hack |
|---|---|
| IE6 | _background-color:#38DB24; |
| IE67 | *background-color:#38DB24 ; |
| IE67 | +background-color:#38DB24 ; |
| IE67 | #background-color:#38DB24; |
| IE67 | background-color:#38DB24 !ie; |
| IE678910 | background-color:#38DB24\9; |
| IE78910&Firefox&Opera&Chrome&Safari | html>body .ie78910-all-hack |
| IE8910&Firefox&Opera&Chrome&Safari | html>/**/body .ie8910-all-hack |
| IE8910&Opera | background-color:#38DB24\0; |
| IE910 | :root .ie910-hack |
| IE910 | background-color:#38DB24\9\0; |
| IE910&Firefox&Opera&Chrome&Safari | body:nth-of-type(1) .ie910-all-hack |
| IE910&Firefox&Opera&Chrome&Safari | @media all and (min-width: 0px) |
| IE910&Firefox&Opera&Chrome&Safari | @media all and (min-width: 0px) |
| IE910&Firefox&Opera&Chrome&Safari | :root *> .ie910-all-4-hack |
| IE10 | @media screen and (-ms-high-contrast: active), |
| Firefox | @-moz-document url-prefix() |
| Chrome&Safari | @media screen and (-webkit-min-device-pixel-ratio:0) |