IE6下!important的bug
日期：2008-07-19 分类：CSS
对于!important和它的用法你肯定不陌生。
!important是CSS2提出的，是提升指定样式规则的应用优先权。你可能看到或听说IE6不支持!important，可以用此方法来区分IE6和其他标准浏览器。但我要说的是：IE6支持!important属性，但存在bug。有什么bug呢？实验是最有力的证据，我们就来做实验证实一下。
我们拿以下XHTML代码并用color属性来做实验：
<h2>文字文字</h2>
给它加上颜色
h2{
color:#f00;
}
color:#f00;
}
结果正是我们设置的那样。
设置如下属性：
h2{
color:#f00 !important;
color:#00f;
}
color:#f00 !important;
color:#00f;
}
没错，正如你所知道的，这时IE6显示蓝色，而IE7和FF显示红色。查看结果
换个写法:
h2{
color:#f00 !important;
}
h2{
color:#00f;
}
color:#f00 !important;
}
h2{
color:#00f;
}
这时你认为会是什么结果呢？是否仍认为在IE6里是蓝色呢？那你错了，这时IE6、IE7和FF都显示红色。查看结果
由此，我们可以得出：在IE6里，重复的属性写在同一对大括号里，后面的将会覆盖前面的，不管上面的属性是否加有!important声明；而写在不同的大括号里，它则会去认加有!important声明的那条属性。
[...] 但仍然存在一个问题：在没有任何内容的时候，IE6里还是会有500px的高度。因为IE6对!important的解释存在bug（你可以点击这里查看），这时IE6只认height:500px，而不认height:auto !important，所以在IE6里自然就出现500px的高度。 [...]