CSS Hack技術(shù)介紹及常用的Hack技巧集錦

 一、什么是CSS Hack？

不同的瀏覽器對(duì)CSS的解析結(jié)果是不同的，因此會(huì)導(dǎo)致相同的CSS輸出的頁(yè)面效果不同，這就需要CSS Hack來解決瀏覽器局部的兼容性問題。而這個(gè)針對(duì)不同的瀏覽器寫不同的CSS 代碼的過程，就叫CSS Hack。

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

1、屬性級(jí)Hack：比如IE6能識(shí)別下劃線”_”和星號(hào)” * “，IE7能識(shí)別星號(hào)” * “，但不能識(shí)別下劃線”_”，而firefox兩個(gè)都不能認(rèn)識(shí)。

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

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

PS：條件注釋只有在IE瀏覽器下才能執(zhí)行，這個(gè)代碼在非IE瀏覽下被當(dāng)做注釋視而不見?？梢酝ㄟ^IE條件注釋載入不同的CSS、JS、HTML和服務(wù)器代碼等。

二、常用的CSS Hack

三、IE6對(duì)!important的支持

!important一般用來做區(qū)分IE6和Firefox等瀏覽器的基本Hack手法。因?yàn)镮E6不支持!important，而Firefox能讀懂!important，其改變了樣式的優(yōu)先級(jí)。其實(shí)IE6在某些情況下，也能認(rèn)識(shí)!important。

例如：
 

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

再來看看：

如果IE6不認(rèn)!important的話，上面代碼.demo的內(nèi)容應(yīng)該顯示為綠色，可偏偏不是，.demo的內(nèi)容顯示為紅色，說明IE6是認(rèn)得!important的。

兩種情況的區(qū)別就在于：當(dāng)在一個(gè)選擇器中，利用!important改變樣式優(yōu)先級(jí)的時(shí)候，IE6下是無效的，后面的樣式覆蓋了前面的，!important被徹底無視了，利用!import

四、IE6下的多選擇符

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

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

但在IE6中，后一個(gè)類名會(huì)覆蓋前一個(gè)類名，也就是說，上例被IE6理解為：
 

同理：

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

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

所以開發(fā)中用多類來組合實(shí)現(xiàn)css效果的時(shí)候，注意IE6的這個(gè)問題。最好的方法就是，不要用類組合的形式。