CSS的!important属性 以及对它的误解

      CSS中的!important是一个非常重要的属性，这个属性是CSS规范中的，但IE6不支持，也正是因为它不支持，才让人找到了解决IE6和别的浏览器不兼容问题的办法。

      一般来说，在CSS中，如果在同一个CSS块中写两个相同的属性，那么是按照后出现的来执行的，比如：

.body{

    margin-left:20px;

    margin-left:40px;

}

      那么在执行的时候其实是按照40px执行的，!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为:

.body{

    margin-left:20px!important;

    margin-left:40px;

}

或者

!important.body{

    margin-left:20px;

    margin-left:40px;

}

      那么在火狐、google浏览器以及IE7以上版本将会按照20px来执行，而在IE6下仍按照40px来执行，因为IE6并不支持!important规范，我们可以按照这个规则来满足IE6的设置需要，什么时候发现IE6和其他浏览器显示效果不同，那么就设置两个，在上面的一个加入

!important标记，而下面的语句不需要添加，这样IE6就按照下面的来执行了。

 

 

 

我一直都认为上面的说法是正确的，因为网上都是这么说的，但一直没有机会实际的测试一下，今天终于有机会使用!important属性之后才发现我被骗了。

通过我的测试，IE6也是支持!important属性的，但也可以用该属性来区分浏览器。

比如有个DIV，它的position属性是absolute，它的top属性在IE留言器下希望是屏幕高度的60%，而在其他浏览器下给个固定值300px，我们可以这么写CSS

div{

position:absolute;

top:expression(screen.height*0.6)!important;

top:300px;

right:0px;

visibility:visible;

}

对于IE浏览器是支持expression表达式的，并且声明了!important属性，就是说IE浏览器只会执行有表达式的这行代码，因此IE浏览器的结果就是屏幕高度的60%，而非IE浏览器因为不支持expression，所以会执行下一行，结果就是300px。