對IE8、IE7、IE6、Firefox2.0.0.12做了簡單的一些CSS HACK測試。下文中的 IE8 暫時僅代表IE8 beta1)。
CSS定義:p {color:#f00;}
xhtml結構:文字
主要是測試"文字"這個顏色在不同瀏覽器下使用hack的一些結果報告:
* html p {color:#f00;} | 支持 IE6 | 不支持FF IE7 IE8b1 |
*+html p {color:#f00;} | 支持 IE7 IE8b1 | 不支持FF IE6 |
p {*color:#f00;} | 支持 IE7 IE6 | 不支持FF IE8b1 |
相關測試:
p {+color:#f00;}
|
支持IE7 IE6
|
不支持FF IE8b1
|
p {_color:#f00;}
|
支持IE6
|
不支持FF
|
p {color:#00f !important;}
p {color:#f00;}
|
支持IE6 IE7 IE8b1 FF
|
|
p {color:#00f !important;color:#f00;}
|
支持IE7 IE8b1 FF
|
不支持IE6
|
head:first-child+body p {color:#f00;}
|
支持IE7 IE8b1 FF
|
不支持IE6
|
/**//*/
p {color:#f00;}
/**/
|
支持IE8b1
|
不支持IE6 IE7 FF
|
html*p {color:#f00;}
|
支持IE6 IE7
|
不支持IE8b1 FF
|
body>p {color:#f00;}
|
支持IE7 IE8b1 FF
|
不支持IE6
|
html[xmlns] p {color:#f00;}
|
支持IE7 IE8b1 FF
|
不支持IE6
|
@import 'style.css';
@import "style.css";
@import url(style.css);
@import url('style.css');
@import url("style.css");
|
支持IE6 IE7 IE8b1 FF
|
|
P {/*/*color:#f00;/* */}
|
支持IE6 IE7 FF
|
不支持IE8b1
|
IE8 中增加了 CSS3 中的子串匹配的屬性選擇器(substring matching attribute selectors),具體規則與正則中的匹配很相似:
E[att^='val'] //子串以'val' 開始
E[att$='val'] //子串以'val' 結束
E[att*='val'] //子串中包含'val'
IE8 支持絕大多數基本的 CSS2.1 選擇器,不支持的包括但不限於:[:first-line] 、[:first-letter]。
對於 CSS2.1 中的 generated content 部分,即通過使用偽元素 :before 和 :after 添加文本內容,IE8 中支持 並未完全 。
而對於幾乎在其他瀏覽器中都支持的 opacity 和 RGBA ,IE8 中依舊沒有支持。
對於原來用來區分 IE 的 HACK 在 IE8 中基本失效(比如*property:value、*property:value等)。
原有 IE 的 list-item whitespace bug 在 IE8 中依舊存在。
原有 IE 的 z-index bug 在 IE8 中依舊存在。
IE8 中產生新的 bug:當 line-heigth 小於正常值時,超出的部分將被裁切掉。
IE8 中依然不支持 display:table 。
IE8 中依然不支持 border 的 transparent 值。
IE8 中 @import 只支持三層嵌套。
IE8中 border的 transparent 不被支持
IE8中產生新的BUG:line-heigth BUG
/*/p{ color:#1e90ff}/*/ 只針對IE8的hack,可以是屬性也可以是類
沒有留言:
張貼留言