Incompatibility of CSS

1. Clear floating clear: both;
<Div class = "colwrapper">
<Div class = "FL">
</Div>
<Div class = "FL">
</Div>
<Div class = "clear"> </div>
</Div>
This Div must pay attention to the declaration position. It must be placed in the most appropriate place and must be at the same level as two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception may occur. And define the clear style as follows :. clear {clear: Both;} In addition, In order to automatically adapt to the height, overflow: hidden should be added to the wrapper; when the box containing float is included, the height auto-adaptation is invalid in IE. In this case, the private attribute of layout of IE should be triggered, which can be done with Zoom: 1; to achieve compatibility. For example, a wrapper is defined as follows:
. Colwrapper {overflow: hidden; ZOOM: 1; margin: 5px auto ;}

2. The problem of doubling margin. The DIV set to float doubles the margin set in IE. This is a problem in IE6.
The solution is to add the display: inline In the div;
For example:
<Div id = "imfloat"> </div>
# Imfloat
{
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */
}

3. cursor: pointer can be displayed in IE and Firefox at the same time. Hand can only be Ie.

4./**/CSS comments are supported by both ie5 and Firefox, but IE6 does not.

5. UL labels have padding values by default in Mozilla, and only margin has a value in IE. Therefore, defining ul {margin: 0; padding: 0 ;}first can solve most of the problems.

6. About Height: it is best not to define the height if the content is dynamically added. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)