CSS compatibility issues in IE6/IE7/IE8/Firefox

1. Use of the symbol.

Both IE6 and IE7 can recognize *, but neither IE8 nor Firefox can recognize it. See the following style

# Wintop
{
Background: url(body-top.gif) top repeat-X;
Margin-top: 10px;
* Margin-top: 0px;
}

In IE6 and IE7, it is interpreted as 0 pixels away from the top margin because it can recognize *, so * margin-top: 0px overwrites the above 10px. In IE8 and Firefox, because it cannot recognize *, it is still interpreted as 10 pixels away from the top margin.

2. * HTML for IE6

. Content
{
Background-color: Gray;
Width: 200px;
Height: 200px;
Left: 0px;
Top: 0px;
}
* Html. Content
{
/* IE6 */
Margin-top: 100px;
}

The 100 pixels of margin-top only work for IE6.

3 .! Important does not recognize IE6, so we can also use it to handle the difference between IE6 and IE7/IE8/ff.

. Content
{
Background-color: Gray;
Width: 200px;
Height: 200px;
Left: 0px;
Top: 0px;
Margin-left: 0px! Important;
Margin-left: 100px;
}

Note: In IE7, IE8, and Firefox, it is preferred to include! Important element, so the following margin-left: 100px won't overwrite the above margin-left: 0px! Important.

For IE6, however, it can only recognize margin-left: 100px.

4. * And! The following example shows how to use important in combination:

Background-color: # ff0000! Important;
* Background-color: #00ff00! Important;
* Background-color: # 0000ff;
Background-color: #000000;

In ff and IE8, the first line takes effect.

In IE7, the second line works.

In IE6, row 4 takes effect.