! Important Role of important

Effect in IE

Effects in Mozilla Firefox

This is because of the bug in IE's interpretation of the distance between boxes (refer to onestab's "floating Model Problem "). I have never solved this problem until I translate "Table showdown CSS-a battle of life and death", the author's tips help me find a solution: use! Important.

! Important is a syntax defined in css1 to improve the application priority of a specified style rule (see the w3.org interpretation ). Syntax format {srule! Important} is written at the end of the definition, for example:

Box {color: red! Important ;}

The most important thing is that IE does not support this syntax all the time, but other browsers do. Therefore, we can use this to define different styles for IE and other browsers. For example, we define a style like this:

. Colortest {border: 20px solid #60a179! Important; Border: 20px solid # 00f; padding: 30px; width: 300px ;}

It can be understood when browsing in Mozilla! Important priority, so the color of #60a179 is displayed:

Cannot be understood when browsing in IE! Important priority, so the color of # 00f is displayed:

You can see, use! Important, we can set different styles for IE and non-ie browsers, as long as it is added after the style of the non-IE browser! Important. Therefore, the 2px display difference on my homepage mentioned above can be easily solved:

Padding-top: 11px! Important;
Padding-top: 9px;

! Important must be a powerful CSS layout tool. Please remember and master it :)