dudo博客

首先感谢aw5186网友在本站的留言,是他的留言让我意识到了这个误区。

长久以来,我们都口口相传Internet Explorer 6是不支持CSS中的!important属性的,这不仅体验在从一些高手那里传授过来的经验,网络上的教程中,甚至在某些经典教程中都存在这样的认识误区。包括在CSS Matery (作者:Andy Budd等)也没有提及CSS中的!important在Internet Explorer 6中的问题。此书中讲到的CSS Hack技术也使用了我前面那篇文章中的说法。不过,按照我的(或者说是大多数人的)习惯,基本上都不会发现CSS 中的!important会存在问题。

一、Internet Explorer 6 (IE 6)不支持CSS中!important属性由来

我们在CSS中使用!important来区分是否Internet Explorer 6 (IE 6)的写法大体如下:

.a {
    color:red !important;
    color:blue;
}

在所有非Internet Explorer 6 (IE 6)及以下浏览器中,class属性为a的元素内文字都将显示为红色,而在Internet Explorer 6 (IE 6)中则显示为蓝色,因此我们也经常用这种方法作为CSS Hack技术来区分浏览器。这正是这个广为流传的CSS Hack技术让大多数人觉得Internet Explorer 6 (IE 6)是不支持!important的。
点击查看演示

二、偶然的发现

可能某位Web designer在写CSS代码的时候,已经为某个class写了一段代码,后来忘记了又重新写了一段并使用了!important,于是发现了这个问题(所有的CSS Hack技术几乎都来来自不经意间的发现)。

我们把上面那段简单的代码换一种写法:

.a {color:red !important;}
.a {color:blue;}

基本上完全一样的写法,只不过我们把一个class为a的CSS规则分开写了两次,正是这样的写法,使Internet Explorer 6 (IE 6)产生了奇妙的变化——!important居然起作用了!
点击查看演示效果

三、总结

总结一下上面的的例子,很容易发现,在Internet Explorer 6 (IE 6)中书写CSS时,当同一个属性多次出现在一个大括号({})时,最后一条规则起作用,也就是!important被忽视;当同一个属性多次出现在不同的大括号中时,以!important属性的优先级最高

所有的知识可能都不像我们最初认知的那样,学习就是一个否定的过程。

最后再次感谢网友aw5186。



共有(6)条评论

Ghost 发表于 2009-5-23 at 10:58 #1楼

一直以来都很反对使用!important作为hack,原因当然除了IE6并不是完全不支持之外,如果一个hack跟正常的写法一样,如果浏览器新版本做了修正,这些hack将会很难处理。因些,hack就应该像个hack。像上面的例子,一般我会加个“*”或“_”,以将它们的作用范围缩小到IE。
[reply=dudo,2009-05-23 11:14 AM]的确如此。
之所以叫Hack,就应该是CSS 规范中没有的东西,如果 CSS 规范中存在只是个别浏览器的暂时不支持,用来区分浏览器的话可能会出问题。[/reply]

[回复]


halfcool 发表于 2009-7-15 at 18:22 #2楼

其实说 IE6 对于 css 中的 !important 的处理正确的说明是: IE6 不处理 css 中 !important 后面的内容,而不是说 IE6 不支持 !important

[回复]


fulljay 发表于 2009-11-18 at 22:18 #3楼

真的学习了,谢谢了

[回复]


jankuo 发表于 2011-1-05 at 10:53 #4楼

文章好,不过楼主要是只写一个 !important 看看ie6的效果就知道你说的情况只是一个表面而已!

很多人都只是知道把文章抄来抄去,完全不理会人家说的假设情况是否有问题,然后一传十十传百,错误就变成真的了

[回复]

dudo 回复:

这样的用法就是!important 原本要在一个{}中完成的语句可以分到两个中完成,但是并不是说!important在IE6中一点作用都没有

[回复]


mimi 发表于 2012-4-05 at 15:53 #5楼

真的很神奇。。。原先我还以为ie认识important…

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量