element.style overrides style, use !improtant to solve

Sometimes when writing css styles and debugging, there will be incredible phenomena, such as: we define a <div class=”aaa”></div> , define styles in css , .aaa{width : 500px;} , but the div block is not as wide as defined when previewing . At this time, it is found through firebug debugging that there is an extra sentence in the css style: element.style{width : 400px;} , which overwrites the original style, but it does not Definition!

This may be caused by system.css , or the use of js code.

A relatively simple way to solve this problem is to use ! important , added in the original style! important ie.aaa {width:500px !important;} , use ! The attribute after important has a high priority and can override the style of element.syle .

Let's briefly talk about the !important style. It can be recognized in ie7 , ie8 , firefox, and Google's high-end browsers, but it is not necessarily in IE6 . There are two situations as follows:

( 1 ) When! When the important style attribute and the style attribute overriding it are used alone (not in the same {} ), IE6 thinks that! important has a high priority and is identifiable.

(2) Dang Han! When the important style attribute is overwritten by the style in the same {}, IE6 thinks! important has a lower priority, that is, it is not recognized.

おすすめ

転載: blog.csdn.net/qing_jian0119/article/details/8990419