標籤:html ie 6 important 基本 開發 font roo 無效 data
來源: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和server代碼等。
二、經常使用的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技術集錦