（1）方式一 條件注釋法

只在IE下生效

<!--[if IE]>

這段文字只在IE瀏覽器顯示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

這段文字只在IE6瀏覽器顯示

<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>

這段文字只在IE6以上(包括)版本IE瀏覽器顯示

<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>

這段文字在非IE8瀏覽器顯示

<![endif]-->

非IE瀏覽器生效

<!--[if !IE]>

這段文字只在非IE瀏覽器顯示

<![endif]-->

（2）方式二 類內(nèi)屬性前綴法

屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴，以達(dá)到預(yù)期的頁(yè)面展現(xiàn)效果。

IE瀏覽器各版本 CSS hack 對(duì)照表

說(shuō)明：在標(biāo)準(zhǔn)模式中

·             “-″減號(hào)是IE6專有的hack

·             “9″ IE6/IE7/IE8/IE9/IE10都生效

·             “?″ IE8/IE9/IE10都生效，是IE8/9/10的hack

·             “9?″ 只對(duì)IE9/IE10生效，是IE9/10的hack

（3）CSS hack方式三：選擇器前綴法

選擇器前綴法是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack。

目前最常見(jiàn)的是

*html *前綴只對(duì)IE6生效*+html *+前綴只對(duì)IE7生效@media screen9{...}只對(duì)IE6/7生效@media ?screen {body { background: red; }}只對(duì)IE8有效@media ?screen,screen9{body { background: blue; }}只對(duì)IE6/7/8有效@media screen? {body { background: green; }} 只對(duì)IE8/9/10有效@media screen and (min-width:0?) {body { background: gray; }} 只對(duì)IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效等等

實(shí)際應(yīng)用

比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫(xiě)：

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

解釋一下：

上面的css在firefox中，它是認(rèn)識(shí)不了后面的那個(gè)帶星號(hào)的東西是什么的，于是將它過(guò)濾掉，不予理睬，解析得到的結(jié)果是:div{background:green},于是理所當(dāng)然這個(gè)div的背景是綠色的。

在IE6中呢，它兩個(gè)background都能識(shí)別出來(lái)，它解析得到的結(jié)果是:div{background:green;*background:red;},于是根據(jù)優(yōu)先級(jí)別，處在后面的red的優(yōu)先級(jí)高，于是當(dāng)然這個(gè)div的背景顏色就是紅色的了。

CSS hack:區(qū)分IE6，IE7，firefox

區(qū)別不同瀏覽器，CSS hack寫(xiě)法：

區(qū)別IE6與FF：

區(qū)別IE6與IE7：

區(qū)別IE7與FF：

區(qū)別FF，IE7，IE6：

注：IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*；

IE6能識(shí)別*；不能識(shí)別 !important;

IE7能識(shí)別*，能識(shí)別!important;

FF不能識(shí)別*，但能識(shí)別!important;

瀏覽器優(yōu)先級(jí)別:FF<IE7<IE6,CSS hack書(shū)寫(xiě)順序一般為FF IE7 IE6

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

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

* html #demo {width:120px;} /*會(huì)被IE6執(zhí)行,之前的定義會(huì)被后來(lái)的覆蓋,所以#demo的寬度在IE6就為120px; */

*+html #demo {width:130px;} /*會(huì)被IE7執(zhí)行*/

所以最后,#demo的寬度在三個(gè)瀏覽器的解釋為: FIREFOX:100px; ie6:120px; ie7:130px;

IE8 最新css hack：

"9"　例:"border:1px 9;".這里的"9"可以區(qū)別所有IE和FireFox.（只針對(duì)IE9 Hack）

"?"　IE8識(shí)別，IE6、IE7不能.

"*"　IE6、IE7可以識(shí)別.IE8、FireFox不能.

"_"　IE6可以識(shí)別"_",IE7、IE8、FireFox不能.

IE6 hack

IE7 hack

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

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

background-color:blue 9?;火狐，傲游，瀏覽器通用

background-color:red!important;

注意寫(xiě)hack的順序，其中：

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

background-color:blue9?; 僅IE9支持；

另外，background-color:eeeeee9;的HACK支持IE6-IE8，但是IE8不能識(shí)別“*”和“_”的CSS HACK。

可綜合上述規(guī)律靈活應(yīng)用。

IE9 和 IE8 以及其他版本的區(qū)別說(shuō)明

background-color:blue; 各個(gè)瀏覽器都認(rèn)識(shí)，這里給firefox用；

background-color:red9;9所有的ie瀏覽器可識(shí)別；

background-color:yellow?; ? 是留給ie8的，最新版opera也認(rèn)識(shí)，后面自有hack寫(xiě)了給opera認(rèn)的，所以，?我們就認(rèn)為是給ie8留的；

+background-color:pink; + ie7定了；

_background-color:orange; _專門留給神奇的ie6；

:root #test { background-color:purple9; } :root是給ie9的，網(wǎng)上流傳了個(gè)版本是 :root #test { background-　color:purple?;}，這個(gè)，新版opera也認(rèn)識(shí)，所以經(jīng)筆者反復(fù)驗(yàn)證最終ie9特有的為:root 選擇符 {屬性9;}

@media all and (min-width:0px){ #test {background-color:black?;} } 這個(gè)是老是跟ie搶著認(rèn)?的神奇的opera，必須加個(gè)?,不然firefox，chrome，safari也都認(rèn)識(shí)。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個(gè)是瀏覽器新貴chrome和safari的。

選擇符級(jí)Hack

CSS內(nèi)部選擇符級(jí)Hack

語(yǔ)法

<hack> selector{ sRules }

說(shuō)明

選擇不同的瀏覽器及版本

盡可能減少對(duì)CSS Hack的使用。Hack有風(fēng)險(xiǎn)，使用需謹(jǐn)慎

通常如未作特別說(shuō)明，本文檔所有的代碼和示例的默認(rèn)運(yùn)行環(huán)境都為標(biāo)準(zhǔn)模式。

一些CSS Hack由于瀏覽器存在交叉認(rèn)識(shí)，所以需要通過(guò)層層覆蓋的方式來(lái)實(shí)現(xiàn)對(duì)不同瀏覽器進(jìn)行Hack的。

簡(jiǎn)單列舉幾個(gè)：

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

內(nèi)部屬性Hack

CSS內(nèi)部屬性級(jí)Hack

語(yǔ)法：selector{<hack>?property:value<hack>?;}

取值：

_： 選擇IE6及以下。連接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（_）更為合適。

*：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過(guò)業(yè)界對(duì)（*）的認(rèn)知度更高。

9：選擇IE6+。

?：選擇IE8+和Opera。

[;property:value;]; 選擇webkit核心瀏覽器（Chrome,Safari）。IE7及以下也能識(shí)別。中括號(hào)內(nèi)外的3個(gè)分號(hào)必須保留，第一個(gè)分號(hào)前可以是任意規(guī)則或任意多個(gè)規(guī)則。 [;color:#f00;]; 與 [color:#f00;color:#f00;]; 與 [margin:0;padding:0;color:#f00;]; 是等價(jià)的。生效的始終是中括號(hào)內(nèi)的最后一條規(guī)則，所以通常選用第一種寫(xiě)法最為簡(jiǎn)潔。

說(shuō)明：一些CSS Hack由于瀏覽器存在交叉認(rèn)識(shí)，所以需要通過(guò)層層覆蓋的方式來(lái)實(shí)現(xiàn)對(duì)不同瀏覽器進(jìn)行Hack的。如下面這個(gè)例子：如想同一段文字在IE6,7,8，chrome，safari，顯示為不同顏色，可這樣寫(xiě)^[1]  ：

.test{

color:#000; /* 正常寫(xiě)法普遍支持 */

color:#00F9; /* 所有IE瀏覽器(ie6+)支持 */

/*但是IE8不能識(shí)別“ * ”和“ _ ” */

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

color:#00F?; /* IE8支持*/

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

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

}

注意了：  不管是什么方法，書(shū)寫(xiě)的順序都是firefox的寫(xiě)在前面，IE7的寫(xiě)在中間，IE6的寫(xiě)在最后面。

補(bǔ)充：IE6能識(shí)別 *，但不能識(shí)別 !important,IE7能識(shí)別 *，也能識(shí)別!important;FF不能識(shí)別 *，但能識(shí)別!important;下劃線”_“,IE6支持下劃線，IE7和firefox均不支持下劃線