When designing the "Web Designer" page, there is a problem that has been plaguing me, the main menu is 2px, which is displayed in IE and other (Mozilla, Opera et al.) Browser. Screenshot below:
The effect of IE
Effect in Mozilla Firefox
This is because IE is caused by the interpretation of the distance between the box (refer to the "floating model of the" floating model "). I have not solved this problem until I translate "Form to Divide CSS - a Battle of Life and Death", a trick prompt to help me find a solution: use! Important.
Important is the syntax defined by CSS1, and the role is to improve the application priority of the specified style rule (see: W3.org's interpretation). The syntax format {srule! Important}, that is, the last side of the definition, for example:
Box {color: red! important;}
The most important point is that IE does not support this syntax, while other browsers are supported. So we can use this to give IE and other browser different style definitions, for example, we define such a style:
.colortest {
Border: 20px Solid # 60A179! Important;
Border: 20px solid # 00F;
Padding: 30px;
Width: 300px;
}
When you are viewing in Mozilla, you can understand! Important's priority, so display # 60A179 colors:
At the time of IE, you can't understand! Important's priority, so the color of # 00f is displayed:
It can be seen, using! Important, we can set different styles for IE and non-IE browser, as long as you add! Important. Therefore, the display difference of my homepage 2px mentioned above is also easy to solve:
Padding-top: 11px! Important; padding-top: 9px;
! Important CSS layouts will surely become a weapon, remember and master it right :) Author: Acha editor: Web Designer
