DIV floating IE text produces 3 pixel bug

DIV floating IE text produces 3 pixel bug

Description: DIV floating IE text generates a 3-pixel bug. The left object is floating on the right side. The left margin of the outer patch is used to locate the bug. The right object (div) is separated by 3 px on the left.

Recurrence: A 3-pixel bug occurs when the text mode is set to miscellaneous in the developer tool.

Tested browsers: IE7 and IE8

How can we distinguish between the standard and weird modes of browsers?

The standard mode is added, but the odd mode (Miscellaneous mode) is removed );

Call the following JS Code to determine the mode:

Lele.log(window.top.doc ument. compatMode); // BackCompat indicates the odd mode. // CSS1Compat indicates the standard mode.

CSS:

# Box {width: 600px; height: 100px; margin: 100px auto; background: blue; }# left {float: left; width: 50%; height: 100px; background: red ;}# right {width: 100%; height: 100px; background: yellow;} * html # left {margin-right:-3px; /* The above sentence is important */}

HTML:

1 | 2 without margin-left:-3px, the effect is:

The effect of adding margin-left:-3px is:

What does the last selector * html in the CSS style sheet mean?

I tested it in ie8 ie7 browser. When the text mode is set to miscellaneous, * html should be used