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 display of the effect deviation 2px. As follows:

The effect in IE

Effects in Mozilla Firefox

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

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

box{color:red!important;}

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

When browsing in Mozilla, it is possible to understand the priority of!important so that the color of #60a179 is displayed:

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

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

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

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

