什麼是CSS Hack？

不同的瀏覽器對CSS的解析結果是不同的，因此會導致相同的CSS輸出的頁面效果不同，這就需要CSS Hack來解決瀏覽器區域性的相容性問題。而這個針對不同的瀏覽器寫不同的CSS 程式碼的過程

CSS Hack常見的有三種形式（Hack主要針對IE瀏覽器）：

注：CSS hack書寫順序，一般是將適用範圍廣、被識別能力強的CSS定義在前面。

1、CSS屬性Hack：

比如IE6能識別下劃線”_”和星號” * “，IE7能識別星號” * “，但不能識別下劃線”_”，而firefox兩個都不能認識。

/* CSS屬性級Hack */
color:red; /* 所有瀏覽器可識別*/
_color:red; /* 僅IE6 識別 */
*color:red; /* IE6、IE7 識別 */
+color:red; /* IE6、IE7 識別 */
*+color:red; /* IE6、IE7 識別 */
[color:red; /* IE6、IE7 識別 */
color:red\9; /* IE6、IE7、IE8、IE9 識別 */
color:red\0; /* IE8、IE9 識別*/
color:red\9\0; /* 僅IE9識別 */
color:red \0; /* 僅IE9識別 */
color:red!important; /* IE6 不識別!important*/
 

2、CSS選擇符Hack：

比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。

/* 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:red\9; } : /* 僅IE9識別 */
 

3、IE條件註釋Hack ：

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

PS：條件註釋只有在IE瀏覽器下才能執行，這個程式碼在非IE瀏覽下被當做註釋視而不見。可以通過IE條件註釋載入不同的CSS、JS、HTML和伺服器程式碼等。

/* 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]-->
 

二、CSS Hack 的解析字元識別對比表

三、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>