CSS hack是什么？IE6\7\8\9\10瀏覽器的CSS hack大全介紹

CSS hack由于不同的瀏覽器，比如Internet Explorer 6,Internet Explorer 7,Mozilla firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。

這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack!

目前IE內核瀏覽器仍然是國內主流瀏覽器，占據著PC瀏覽器的大部分市場份額，版本從IE6到IE10，所有前段工作者都必須面對和解決多個ie瀏覽器對代碼的兼容性問題。在很多情況下，我們需要專門針對IE寫css樣式，即針對IE的css hack，下面將詳細介紹這些內容：

1、常見的特殊符號的應用：

IE6：

_selector{property:value;}

selector{property:value;property:value !important;} //IE6 不支持同一選擇符中的 !important

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

總結起來，如下：

其中，S表示Standards Mode即標準模式，Q表示Quirks Mode，即兼容模式。

（了解更多Quirks模式、Strict(Standars)模式？）

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important; color:green;	No	No	Yes	No	Yes	No

2、條件注釋語句（<!--[if IE]> <![endif]-->）

所有的IE可識別

僅IE6可識別

IE6以及IE6以上版本可識別

IE7以下版本可識別

lt 表示less than 當前條件版本以下的版本，不包含當前版本。

gte 表示greeter than or equal 當前版本以上版本，并包含當前版本。

lte 表示less than or equal 當前版本以下版本，并包含當前版本。

3、meta聲明

由于IE8 可能會將頁面按照 IE7 模式進行渲染，針對 多版本IE的現(xiàn)狀，通常會采用設置 X-UA-Compatible HTTP 頭的方式將頁面在IE中采用統(tǒng)一的渲染模式。

 //標準 IE7 模式

 //兼容 IE7 模式

//標準 IE 模式

4、其他（/*\**/注釋法）

網上也流傳著這樣一種ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA識別*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA識別*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8識別*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8識別*//*“color”和“/*\**/”之間有個空格*/

分析下：
background-color:blue; 各個瀏覽器都認識，這里給firefox用；
background-color:red\9;\9所有的ie瀏覽器可識別；
background-color:yellow\0; \0 是留給ie8的，但筆者測試，發(fā)現(xiàn)最新版opera也認識，汗。。。不過且慢，后面自有hack寫了給opera認的，所以，\0我們就認為是給ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _專門留給神奇的ie6；
:root #test { background-color:purple\9; } :root是給ie9的，網上流傳了個版本是 :root #test { background-color:purple\0;}，呃。。。這個。。。，新版opera也認識，所以經筆者反復驗證最終ie9特有的為:root 選擇符 {屬性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 這個是老是跟ie搶著認\0的神奇的opera，必須加個\0,不然firefox，chrome，safari也都認識。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個是瀏覽器新貴chrome和safari的。

好了就這么多了，特別注意以上順序是不可以改變的。css hack雖然可以解決個瀏覽器之間css顯示的差異問題，但是畢竟不符合W3C規(guī)范，我們平時寫css最好是按照標準來，這樣對我們以后維護也是大有好處的，實在不行再用。

區(qū)別不同瀏覽器的CSS hack寫法：

區(qū)別IE6與FF：
background:orange;*background:blue;

區(qū)別IE6與IE7：
background:green !important;background:blue;

區(qū)別IE7與FF：
background:orange; *background:green;

區(qū)別FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

注：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

------------------------------------------------------
另外再補充一個，下劃線"_",
IE6支持下劃線，IE7和firefox均不支持下劃線。

	IE6	IE7	FF
*	√	√	×
!important	×	√	√
_	√	×	×

于是大家還可以這樣來區(qū)分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。