Use !important to solve the layout differences between IE and Mozilla_CSS/HTML

When designing the "Web Designer" page, there is a problem that has been bothering me. The display effect of the main menu in IE and other (Mozilla, Opera, etc.) browsers has a deviation of 2px. The screenshot is as follows:

Effect in IE

Effects in Mozilla Firefox

This is caused by a bug in IE's interpretation of the distance between boxes (refer to onestab's " Floating model problem "). I never solved this problem until I translated " Table vs. CSS--A battle of life and death ". A tip from the author helped me find a solution: use !important.

!important is a syntax defined in CSS1, which is used to increase the application priority of specified style rules (see: W3.org’s explanation ). Grammar format { sRule!important }, which is written at the end of the definition, for example:

box{color:red !important;}

The most important point is: IE has never supported this syntax, but other browsers do. Therefore, we can use this to define different styles for IE and other browsers. For example, we define such a style:

.colortest { 
border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;
} 

When browsing in Mozilla, you can understand the priority of !important, so the color #60A179 is displayed:

When browsing in IE, the priority of !important is not understood, so the color #00F is displayed:

As you can see, using !important, we can set different styles for IE and non-IE browsers. Just add !important after the non-IE browser style. Therefore, the display difference of 2px on my homepage mentioned above can be easily solved:

PADDING-TOP: 11px !important;
PADDING-TOP: 9px;

!important will definitely become a powerful tool for CSS layout, please remember and master it:)