Use!important to solve the layout difference between IE and Mozilla _css/html

In the design of "web designer" page, there is a problem has been bothering me, the main menu in IE and other (Mozilla, opera, etc.) browser shows the effect of 2px deviation. Screenshot below:

The effect in IE

The effect in Mozilla Firefox

This is due to the bug caused by IE's explanation of the distance between the boxes (refer to Onestab's "floating model Problem"). I have not solved this problem until I translate "Table vs css--a Battle of life and Death", the author of a tip helped me find a solution: with!important.

!important is the syntax defined by CSS1 to increase the application priority of the specified style rule (see: W3.org's Interpretation). Syntax format {srule!important}, which is written on the last side of the definition, for example:

Box{color:red!important;}

The most important point is that IE does not support this syntax all the time, while other browsers support it. So we can use this to give IE and other browsers different style definitions, for example, we define a style like this:

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

When browsing in Mozilla, you can understand the!important priority, so show the color of the #60a179:

When browsing in IE, it is not possible to understand the priority of!important, so the color of the #00f is displayed:

As you can see, with!important, we can set different styles for IE and non ie browsers, as long as we add!important to the back of the non IE browser style. Therefore, the above mentioned my homepage 2px the display difference also easily solves:

PADDING-TOP:11PX!important;
padding-top:9px;

!important must become a tool for CSS layout, please remember and master it: