CSS Hack技術介紹及經常使用的Hack技巧集錦

1、什麼是CSS Hack？

不一樣的瀏覽器對CSS的解析結果是不一樣的，所以會致使相同的CSS輸出的頁面效果不一樣，這就須要CSS Hack來解決瀏覽器局部的兼容性問題。而這個針對不一樣的瀏覽器寫不一樣的CSS 代碼的過程，就叫CSS Hack。

CSS Hack常見的有三種形式：CSS屬性Hack、CSS選擇符Hack以及IE條件註釋Hack， Hack主要針對IE瀏覽器。

一、屬性級Hack：好比IE6能識別下劃線」_」和星號」 * 「，IE7能識別星號」 * 「，但不能識別下劃線」_」，而firefox兩個都不能認識。

二、選擇符級Hack：好比IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。

三、IE條件註釋Hack：IE條件註釋是微軟從IE5開始就提供的一種非標準邏輯語句。好比針對全部IE：<!–[if IE]><!–您的代碼–><![endif]–>，針對IE6及如下版本：<!–[if lt IE 7]><!–您的代碼–><![endif]–>，這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都 會生效。

PS：條件註釋只有在IE瀏覽器下才能執行，這個代碼在非IE瀏覽下被當作註釋視而不見。能夠經過IE條件註釋載入不一樣的CSS、JS、HTML和服務器代碼等。

2、經常使用的CSS Hack

 

代碼以下:

/* CSS屬性級Hack */
color:red; /* 全部瀏覽器可識別*/
_color:red; /* 僅IE6 識別 */
*color:red; /* IE六、IE7 識別 */
+color:red; /* IE六、IE7 識別 */
*+color:red; /* IE六、IE7 識別 */
[color:red; /* IE六、IE7 識別 */
color:red9; /* IE六、IE七、IE八、IE9 識別 */
color:red; /* IE八、IE9 識別*/
color:red9; /* 僅IE9識別 */
color:red ; /* 僅IE9識別 */
color:red!important; /* IE6 不識別!important*/
-------------------------------------------------------------
/* CSS選擇符級Hack */
*html #demo { color:red;} /* 僅IE6 識別 */
*+html #demo { color:red;} /* 僅IE7 識別 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 能夠識別 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 能夠識別 */
:root #demo { color:red9; } : /* 僅IE9識別 */
--------------------------------------------------------------
/* IE條件註釋Hack */
<!--[if IE]>此處內容只有IE可見<![endif]--> 
<!--[if IE 6]>此處內容只有IE6.0可見<![endif]--> 
<!--[if IE 7]>此處內容只有IE7.0可見<![endif]--> 
<!--[if !IE 7]>此處內容只有IE7不能識別，其餘版本都能識別，固然要在IE5以上。<![endif]-->
<!--[if gt IE 6]> IE6以上版本可識別,IE6沒法識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if lt IE 7]> 低於IE7的版本才能識別，IE7沒法識別。 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7如下版本可識別<![endif]-->
<!--[if !IE]>此處內容只有非IE可見<![endif]-->

 

3、IE6對!important的支持

!important通常用來作區分IE6和Firefox等瀏覽器的基本Hack手法。由於IE6不支持!important，而Firefox能讀懂!important，其改變了樣式的優先級。其實IE6在某些狀況下，也能認識!important。

例如：
 

代碼以下:

<style type="text/css">
.demo{
color:red !important;
color:green;
}
</style>
<div class="demo">www.jb51.net</div>

上面代碼在FF下字體爲紅色、IE6下字體爲綠色。說明IE6忽視!important的存在。

 

再來看看：

代碼以下:

<style type="text/css"> 
.demo{ color:red !important; } 
.demo { color:green; } 
</style> 
<div class="demo">www.jb51.net</div>

若是IE6不認!important的話，上面代碼.demo的內容應該顯示爲綠色，可恰恰不是，.demo的內容顯示爲紅色，說明IE6是認得!important的。

 

兩種狀況的區別就在於：當在一個選擇器中，利用!important改變樣式優先級的時候，IE6下是無效的，後面的樣式覆蓋了前面的，!important被完全無視了，利用!import

4、IE6下的多選擇符

多類選擇符的寫法。例如：
 

代碼以下:

#my.c1.c2 { color:red;}
.c1.c2 { color:red;}

以上寫法在IE7+/FF/Opera/Safari 等瀏覽器都支持。

 

但在IE6中，後一個類名會覆蓋前一個類名，也就是說，上例被IE6理解爲：
 

代碼以下:

#my.c2 { color:red;}
.c2 { color:red;}

同理：

 

代碼以下:

#my.c1.c2.c3 { color:red;}

IE6理解爲　#my.c3 {color:red;}

 

代碼以下:

.c1.c2.c3 { color:red;}

IE6理解爲　.c3 { color:red; }

 

因此開發中用多類來組合實現css效果的時候，注意IE6的這個問題。最好的方法就是，不要用類組合的形式。