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 of the
is that IE does not support this syntax all the time, and other browsers support it. So we can use this to give IE and other browsers different style definitions, for example, we define 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 display the #60a179 color:
When browsing in IE, it is not possible to understand the priority of!important, so display the #00f color:
You can see that, 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 home page 2px display difference is also easy to resolve:
padding-top:11px!important;
Padding-top:9px;
!important must be a tool for CSS layout, remember and master it:
i8n6x7>