紅河州領先的互聯網服務提供商
以技術為后盾 以服務求發展
首頁 >> 知識寶庫 >> 網頁設計 >> 信息內容

兼容瀏覽器IE6/7/Hack8常用CSS !important

一、什么是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]–>,針對IE6及以下版本:<!–[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.jb51.net</div>

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

<style type="text/css">
.demo{ color:red !important; }
.demo { color:green; }
</style>
<div class="demo">www.jb51.net</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的這個問題。最好的方法就是,不要用類組合的形式。
(已被查看 人次)
分享到:

正規網絡公司

專業的系統開發公司

紅河本地化服務

您身邊的網絡服務專家

100%正版授權

全套自主開發授權使用

按需求定制開發

滿足您各種開發需求

完善售后服務

7×24小時·極速響應

亚洲中文无码亚洲人成影院