element.style覆盖样式,使用!improtant解决
有时在写css样式,并调试时,会出现很不可思议的现象,比如:我们定义了一个<div class=”aaa”></div>,在css中定义样式,.aaa{width:500px;},但预览时该div块却没有定义的那么宽,这时用firebug调试发现,css样式中多了一句:element.style{width:400px;},将原来的样式覆盖掉了,但自己并没有定义啊!
这有可能是system.css,或者是使用js代码所致。
解决这个问题的比较简单的方式就是使用!important,在原来的样式中加入!important,即.aaa{width:500px !important;},使用!important后的属性优先级就很高了,可以覆盖掉element.syle的样式。
下面简单说一下!important这个样式,它在ie7、ie8、火狐、谷歌高端浏览器中可以被识别,但在IE6中却不一定,分以下两种情况:
(1)当!important的样式属性和覆盖它的样式属性单独使用时(不在同一个{}内),IE6认为!important的优先级高,是可识别的。
(2)当含!important的样式属性被同一个{}里的样式覆盖时,IE6认为!important优先级较低,即不可识别。