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 "Problems with Floating Models"). 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. Its function is to increase the application priority of specified style rules (see: W3.org explanation). The syntax format { sRule!important } 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 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 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 :)
