標籤：style blog color io ar for strong sp div
什麼是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中看到是綠色的。
在firefox中，它是識別不了後面的那個帶星號的東西是什麼的，於是將它過濾掉，解析得到的結果是:div{background:green},於是理所當然這個div的背景是綠色的。在IE6中，它兩個background都能識別出來，它解析得到的結果是:div{background:green;background:red;},於是根據優先順序別，處在後面的red的優先順序高，於是當然這個div的背景顏色就是紅色的了。<!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） 各個瀏覽器都認識，這裡給firefox用；
（2） \9所有的ie瀏覽器可識別；
（3） \0 是留給ie8的，但筆者測試，發現最新版opera也認識，汗。。。不過且慢，後面自有hack寫了給opera認的，所以，\0我們就認為是給ie8留的；
（4）+ + ie7定了；
（5）_ _專門留給神奇的ie6；
（6）:root #test { } :root是給ie9的，網上流傳了個版本是 :root #test { background-color:purple\0;}，新版opera也認識，所以經筆者反覆驗證最終ie9特有的為:root 選擇符 {屬性\9;}
（7）@media all and (min-width:0px){ #test {} } 這個是老是跟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) |
CSS技巧（二）：CSS hack
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
