解析并验证IE6及之前版本的'!important’ BUG

之前在某个前端技术群中与高手讨论‘!important是否为IE BUG,怎样设计示例进行验证’的问题。当时我举的示例是引用网上前辈的例子:

#test {
    color
:red !important;/*IE7、FF、OP等显示红色文字*/
    color
:green;/*IE6显示绿色文字*/
}

当时被驳回,理由是这个示例没有说服力。后来自己想想,确实,这个例子应该只能算是一个特例,是一种表面现象,而要说服别人相信你的观点,就必须说出实质的东西。最近再次研究CSS特殊性、继承和层叠等技术,现在的理解应该更进一步了吧,至少我是把自己给说服了——!important 确实是IE BUG!

为了更好地说明实质性的原理,有必要真正了解CSS重要性(!important)。当然,要真正说明清楚还必须了解特殊性、继承和层叠等,但这些不是本文叙述的范围。

在CSS优先级规则中,!important 处于最高的优先级,其权重之高优先于内联样式。了解CSS特殊性的同仁应该非常清楚,内联样式具有至高的优先级(优先级为1,0,0,0,ID选择器的优先级次之:0,1,0,0),但碰到 !important 的时候,内联样式要略逊一筹(这里假设内联样式中没有设置!important)。举个例子:

span {color:gray !important;}

以上样式应用到以下的结构:

<span style="color:blue;">我会显示为什么颜色呢?</span>

经验证,文本‘我会显示为什么颜色呢?’将在浏览器(包括IE6)中显示为灰色(gray)。这个结果说明,浏览器(包括IE6)都能够正常解析 !important 。

然而,当我们稍稍改变一下样式表:

span {
    color
:gray !important;/*IE6将不会将文本显示为灰色(gray)*/
    color
:red;
}

应用了以上样式表之后,文本将会显示为什么颜色呢??经验证,IE7、FF、OP均依旧显示为灰色(color:gray),而IE6则显示为蓝色(color:blue)!

为什么会出现这种结果呢?BUG!!

真的是BUG吗?让我在修改一下样式表:

span {
    color
:gray !important;/*IE6将依旧不会解析该规则*/
    padding
:8px;
    line-height
:25px;
    vertical-align
:middle;
    color
:red;
}

我在两个color属性之间随意添加几条规则,结果与没有那几条规则的结果是完全一样的,即,IE6将文本显示为蓝色(color:blue)。

好吧,如果以上的改动不能说明实质性的问题,那么我再次修改了样式表:

span {
    color
:gray !important;/*嘿,IE6终于‘看到’!important了*/
}
span 
{
    color
:red;
}

以上规则,如果没有 !important ,则根据层叠规则,color:red 会将 color:gray 覆盖掉,而内联样式 color:blue 再将 color:red 覆盖掉——但是有了 !important 之后,一切都必须因此而‘改观’——浏览器(包括IE6)将文本显示为灰色(color:gray !important)!

 

综上所述,!important 是能够被IE6解析了,而之所以会碰到以上IE6不能解析 !important 的情况,是因为将两个相同的规则编入同一个规则分组(有!important的规则在前)时就构成了IE6的BUG

参考资料:《CSS权威指南:第三版》 Eric A.Meyer著

 

posted @ 2009-03-13 15:30  PanpChing  阅读(1184)  评论(3编辑  收藏  举报