CSS之CSS hack

因爲不一樣的瀏覽器對CSS的支持及解析結果不同，還因爲CSS中的優先級的關係。咱們就能夠根據這個來針對不一樣的 瀏覽器來寫不一樣的CSS。

CSS Hack大體有3種表現形式，CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack，CSS Hack主要針對。

類內部 Hack：好比 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。等等

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

HTML ^[1] 頭部引用(if IE)Hack：針對全部IE：<!--[if IE]><!--您的代碼--><![endif]-->，針對IE6及如下版本：<!--[if lt IE 7]><!--您的 代碼--><![endif]-->，這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

書寫順序，通常是將識別能力強的瀏覽器的CSS寫在前面。下面如何寫裏面說得更詳細些。

好比要分辨IE6和firefox兩種瀏覽器，能夠這樣寫：

div{
background:green; /* for firefox */
*background:red; /* for IE6 */ (both IE6 && IE7)
}

我在IE6中看到是紅色的，在firefox中看到是綠色的。

解釋一下：

上面的css在firefox中，它是認識不了後面的那個帶星號的東西是什麼的，因而將它過濾掉，不予理睬，解析獲得的結果是:div{background:green},因而理所固然這個div的背景是綠色的。

在IE6中呢，它兩個background都能識別出來，它解析獲得的結果是:div{background:green;background:red;},因而根據優先級別，處在後面的red的優先級高，因而固然這個div的背景顏色就是紅色的了。

CSS hack:區分IE6，IE7，firefox

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

區別IE6與FF：

1	background :orange;* background : blue ;

區別IE6與IE7：

1	background : green !important ; background : blue ;

區別IE7與FF：

1	background :orange; * background : green ;

區別FF，IE7，IE6：

1 2	background :orange;* background : green ; _background : blue ; background :orange;* background : green !important ;* background : blue ;

注：IE都能識別*;標準瀏覽器(如FF)不能識別*；

IE6能識別*；不能識別 !important;

IE7能識別*，能識別!important;

FF不能識別*，但能識別!important;

	IE6	IE7	FireFox
*	√	√	×
!important	×	√	√

瀏覽器優先級別:FF<IE7<IE6,CSS hack書寫順序通常爲FF IE7 IE6

以: " #demo {width:100px;} "爲例;

#demo {width:100px;} /*被FIREFOX,IE6,IE7執行.*/

* html #demo {width:120px;} /*會被IE6執行,以前的定義會被後來的覆蓋,因此#demo的寬度在IE6就爲120px; */

*+html #demo {width:130px;} /*會被IE7執行*/

因此最後,#demo的寬度在三個瀏覽器的解釋爲: FIREFOX:100px; ie6:120px; ie7:130px;

IE8 最新css hack：

"\9"　例:"border:1px \9;".這裏的"\9"能夠區別全部IE和FireFox.

"\0"　IE8識別，IE六、IE7不能.

"*"　IE六、IE7能夠識別.IE八、FireFox不能.

"_"　IE6能夠識別"_",IE七、IE八、FireFox不能.

IE6 hack

1	_background-color : #CDCDCD ; /* ie 6*/

 

 

 

 

 

IE7 hack

 

*background-color:#dddd00; /* ie 7*/IE8 hack

background-color:red \0; /* ie 8/9*/IE9 hack

background-color:blue \9\0;火狐，傲遊，瀏覽器通用

background-color:red!important;

注意寫hack的順序，其中：

background-color:red\0;IE8和IE9都支持；

background-color:blue\9\0; 僅IE9支持；

另外，background-color:eeeeee\9;的HACK支持IE6-IE8，可是IE8不能識別「*」和「_」的CSS HACK。

可綜合上述規律靈活應用。

IE9 和 IE8 以及其餘版本的區別說明

background-color:blue; 各個瀏覽器都認識，這裏給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的。

選擇符級Hack

CSS內部選擇符級Hack

語法

<hack> selector{ sRules }

說明

選擇不一樣的瀏覽器及版本

儘量減小對CSS Hack的使用。 Hack有風險，使用需謹慎

一般如未做特別說明，本文檔全部的代碼和示例的默認運行環境都爲標準模式。

一些CSS Hack因爲瀏覽器存在交叉認識，因此須要經過層層覆蓋的方式來實現對不一樣瀏覽器進行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 */

內部屬性Hack

CSS內部屬性級Hack

語法：selector{<hack>?property:value<hack>?;}

取值：

_： 選擇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因爲瀏覽器存在交叉認識，因此須要經過層層覆蓋的方式來實現對不一樣瀏覽器進行Hack的。以下面這個例子：如想同一段文字在IE6,7,8，chrome，safari，顯示爲不一樣顏色，可這樣寫 ^[2] ：

.test{

color:#000; /* 正常寫法廣泛支持 */

color:#00F\9; /* 全部IE瀏覽器(ie6+)支持 */

/*可是IE8不能識別「 * 」和「 _ 」 */

[color:#000;color:#0F0; /* SF,CH支持 */

color:#00F\0; /* IE8支持*/

*color:#FF0; /* IE7支持 */

_color:#F00; /* IE6支持 */

}

注意了：^[2]不論是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

補充：IE6能識別 *，但不能識別 !important,IE7能識別 *，也能識別!important;FF不能識別 *，但能識別!important;下劃線」_「,IE6支持下劃線，IE7和firefox均不支持下劃線 ^[2] 。