常用的CSS Hack技術集錦，csshack集錦

常用的CSS Hack技術集錦，csshack集錦

來源：http://www.ido321.com/938.html

一、什麼是CSS Hack？

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

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

1、屬性級Hack：比如IE6能識別底線”_”和星號” * “，IE7能識別星號” * “，但不能識別底線”_”，而firefox兩個都不能認識。

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

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

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

二、常用的CSS Hack

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

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

三、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.ido321.com
</div>

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

再來看看：

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

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

兩種情況的區別就在於：當在一個選取器中，利用!important改變樣式優先順序的時候，IE6下是無效的，後面的樣式覆蓋了前面的，!important被徹底無視了，利用!import

四、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的這個問題。最好的方法就是，不要用類組合的形式。

 下一篇：IE 8相容：X-UA-Compatible的解釋

對於CSS的Hack技術，

* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

_：
選擇IE6及以下。連接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用底線（_）更為合適。
*：
選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（*）的認知度更高
\9：
選擇IE6+
\0：
選擇IE8+和Opera
[;property:value;];：
選擇webkit核心瀏覽器（Chrome,Safari）。IE7及以下也能識別。中括弧內外的3個分號必須保留，第一個分號前可以是任意規則或任意多個規則
[;color:#f00;]; 與 [color:#f00;color:#f00;]; 與 [margin:0;padding:0;color:#f00;]; 是等價的。生效的始終是中括弧內的最後一條規則，所以通常選用第一種寫法最為簡潔。
 
CSS hack 大全

朋友：
你應該去這裡看看。www.52css.com/css/