IE里关于CSS的优先级的bug（一）

最新推荐文章于 2021-06-19 23:50:54 发布

转载最新推荐文章于 2021-06-19 23:50:54 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ddshou/archive/2009/05/05/1449774.html

文章标签：

#xhtml

本文揭示了一个关于CSS优先级在IE浏览器中的Bug。通过两个相同优先级的选择器例子，展示了IE和其他标准浏览器如Firefox在解析上的差异。

CSS优先级的知识大家应该都比较了解了（如果不了解可以参看《详解CSS的优先权》）。但是，注意哦，这只是W3C的CSS2.1规范自己声称的。而事实上，确实有“极少数的浏览器”并不一定按照这个规则来办。这个“极少数浏览器”我就不点名了哈。

今天介绍一个最简单的。

div.colorful {color: red;}
div .colorful {color: green;}

按照CSS2.1规范里的规则，这两个CSS选择符应该是相同的优先级，应该以最后的为准。但是，在IE里并不是这样哦。

在IE（随便哪个版本）和FF（或Opera）里看这段代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb18030" /> <title>IE里关于CSS优先级的bug（一）</title> <style type="text/css"> div.colorful {color: red;} div .colorful {color: green;} </style> </head> <body> <div> <div class="colorful">这一段话则比较有意思，在标准浏览器里都是呈现绿色，而在IE（6、7、8）里，却呈现红色。因为IE（6、7、8）居然认为“div.colorful”的优先级比“div .coloful”的优先级高，而按标准其实它们是一样优先级</div> </div> </body> </html>

提示：您可以修改代码之后再运行

看到了没？标准浏览器里是绿色，而IE里是红色哦。

同样的问题还会出现在：

.colorful div {color: red;}
div .colorful{color: green;}

IE认为，“.colorful div”比“div .colorful”的优先级高。自己去试试看。

但是呢，它会认为“.colorful div”和“div.colorful”的优先级一样。所以结果是

.class html = html.class > html .class

这个结论在IE5.5、IE6、IE7、IE8beta1里面都成立。

是不是有点晕了？哈哈～～实在记不住就算了吧～

转载于:https://www.cnblogs.com/ddshou/archive/2009/05/05/1449774.html