CSS hack

雖然CSS hack技術有風險，不推薦使用，但仍是有必要了解一下。

1、什麼是CSS hack？

個人理解就是針對不一樣瀏覽器/不一樣版本，寫相應CSS代碼，這一過程叫作CSS hack。

2、CSS hack原理

因爲不一樣瀏覽器/不一樣版本，對CSS的理解會有差別，以及CSS優先級的關係，咱們能夠據此針對不一樣的瀏覽器/版本寫不一樣的CSS。

3、CSS hack分類

CSS hack主要可分爲：選擇器hack，CSS屬性hack和IE條件hack。

一、選擇器hack

選擇器hack就是在選擇器前加上一些只有特定瀏覽器才能識別的前綴進行hack。

比較經常使用的有如下幾種：

• *html　　　　*前綴只對IE6生效
• *+html　 　　*+前綴只對IE7生效
• @media screen\9{...}只對IE6/IE7生效
• @media \0screen {body { background: red; }}只對IE8有效
• @media \0screen\,screen\9{body { background: red; }}只對IE6/7/8有效
• @media screen\0 {body { background: red; }} 只對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有效
• :root body{background:red\9;}只對IE9有效

二、CSS屬性hack

CSS屬性hack就是在CSS屬性名前加上一此只有特定瀏覽器才能識別的前綴進行hack。

下面是IE瀏覽器CSS hack對照表：

hack	寫法	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	Y	Y	Y	Y	N	N	N	N	N	N
+	+color	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	Y	Y	N	N	N	N	N	N	N	N
_	_color	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	N	N	N	N	N	N	Y	N	Y	N
important	color:red !important	N	N	Y	N	Y	N	Y	N	Y	Y

在標準模式中：

"-"減號是IE6特有的

「\9」是IE6~IE10都有效

"\0"是IE8~IE10的hack（最新opera也識別）

"\9\0"是IE9/E10的hack

因爲瀏覽器對一些CSS hack存在交叉認識，因此須要經過覆蓋的方式來實現對不一樣瀏覽器的hack。以下例子：

    #test   
     {   
　　　    color:blue;      /*firefox*/
         color:red\9;      /*all ie*/
         color:yellow\0;    /*ie8*/
         *color:pink;        /*ie7*/
         _color:orange;       /*ie6*/
     }  
     :root #test { color:purple\9; }  /*ie9*/
     @media all and (min-width:0px){ #test {color:black\0;} }  /*opera 若是不加\0,firefox，chrome，safari也都認識*/
     @media screen and (-webkit-min-device-pixel-ratio:0){ #test {color:gray;} }  /*chrome and safari*/

 

三、IE條件hack

這種方式是IE瀏覽器專有的hack，也是微軟官方推薦的hack方式:lt小於，gt大於，lte小於等於，gte大於等於，!非。

針對全部IE:<!--[if IE]>針對全部IE<![endif] -->

只針對IE6:<!--[if IE 6]>只針對IE6<![endif]-->

針對IE7及如下版本：<!--[if lte IE 7>針對IE7及如下版本<![endif]-->

針對IE8以上版本：<!--[if gt IE 8>針對IE8以上版本<![endif]-->

針對非IE:<!--[if !IE]>針對非IE<![endif] -->