關於瀏覽器的最離奇的統計結果之一就是Internet Explorer 版本6,7和8共存。 截至本文,Internet Explorer各個版本總共佔據了大約65%的市場份額。 在網站開發社區,這個數位要小很多,統計顯示大概只有40%。
這些統計中比較有趣的部分是,IE6、IE7、IE8之間的數值很接近,這防止了單個Microsoft的瀏覽器占居統治地位——與過去的情況相反。 根據這些令人遺憾的統計結果,在為客戶開發網站的時候開發人員對所有當前使用的IE瀏覽器做全面的測試是必要的,而且這樣在個人專案上也可以拉攏更多的使用者。
多謝那些JavaScript庫(框架),跨瀏覽器的JAVAscript的測試已經像當前形勢所允許的那樣接近完美了。 但在CSS開發中還不是這樣,特別是關係到IE目前存在的三個版本。
本文嘗試為希望瞭解CSS對IE6、IE7、IE8的支援的不同的開發者提供一份詳細的、易用的參考。 本參考包含以下情況的概述和相容情況:
A、三個瀏覽器中的一個支援而另外兩個不支援的條目
B、三個瀏覽器中的兩個支援而另外一個不支援的條目
本文不討論:
A、三個瀏覽器都不支援的條目
B、私有屬性
因此,本文的中心是三個瀏覽器中的不同,而不是必要的支援缺陷。 該清單被分為以下五個部分:
1、選擇器與繼承
2、偽類與偽元素
3、屬性支援
4、其它各種技術
5、重要bug和不相容問題
1、選擇器與繼承
A、子選擇器
示例
body > p {
color: #fff;
}
描述
子選擇器選擇一個特定父級元素的所有直接子級元素,在上面的例子中,body是父元素,p是子項目。
支援情況
IE6 No
IE7 Yes
IE8 Yes
Bugs
IE7中,如果在父級標籤和子級標籤之間有一個HTML注釋,子選擇器將不會工作。
B、鏈類
示例
.class1.class2.class3 {
background: #fff;
}
描述
鏈類用於送一個HTML元素有多個class聲明的情況,就像這樣:
<div class="class1 class2 class3">
<p>Content here.</p>
</div>
支援情況
IE6 No
IE7 Yes
IE8 Yes
Bugs
IE6好像支援這種情況,因為它能匹配鏈中的最後一個class到使用該class的元素上,然而,它並不能限制一個使用鏈中所有class的元素。
C、屬性選擇器
示例
a[href] {
color: #0f0;
}