CSS hack

什麼是hack？

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

目前IE內核瀏覽器仍然是國內主流瀏覽器，佔據着PC瀏覽器的大部分市場份額，版本從IE6到IE10，全部前段工做者都必須面對和解決多個ie瀏覽器對代碼的兼容性問題。在不少狀況下，咱們須要專門針對IE寫css樣式，即針對IE的css hack，下面我各個網站的查詢收集的內容：

常見的特殊符號的應用：

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

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

全部的IE可識別 

僅IE6可識別 

IE6以及IE6以上版本可識別 

IE7如下版本可識別 

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

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

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

meta聲明

因爲IE8 可能會將頁面按照 IE7 模式進行渲染，針對 多版本IE的現狀，一般會採用設置 X-UA-Compatible HTTP 頭的方式將頁面在IE中採用統一的渲染模式。

 //標準 IE7 模式

 //兼容 IE7 模式

//標準 IE 模式

其餘（/*\**/註釋法）

網上也流傳着這樣一種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」和「/*\**/」之間有個空格*/

分析下：
各個瀏覽器都認識，這裏給firefox用；
background-color:red\9;\9全部的ie瀏覽器可識別；
background-color:yellow\0; \0 是留給ie8的，但筆者測試，發現最新版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規範，咱們平時寫css最好是按照標準來，這樣對咱們之後維護也是大有好處的，實在不行再用。

區別不一樣瀏覽器的CSS hack寫法： 

區別IE6與FF： 
background:orange;*background:blue; 

區別IE6與IE7： 
background:green !important;background:blue; 

區別IE7與FF： 
background:orange; *background:green; 

區別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	×	√	√
_	√	×	×

因而你們還能夠這樣來區分IE6，IE7，firefox : background:orange;*background:green;_background:blue; 注：無論是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。