Position: Newest resentment between relative and IE6

By accident, it was really an accident. By accident, I found that position: relative and IE6 really have one leg!

 

Let's look at the example:

Generally, Sprite background images are often used to define the icon before a text, for example, the error prompt icon:

 

 

We generally set this as follows:

<Em class = "Tip errormsg"> enter 2-4 Chinese characters! </Em>

. Tip {Background: URL (../images/icon.png) No-repeat-99999px 0 ;}

. Errormsg {background-position: 0-30px;} For example, the error icon is on this coordinate.

In this case, all browsers are normal and the icons and text are arranged neatly.

 

However, sometimes we need to move the error prompt down to 1 pixel so that the prompt is parallel to the input box on the left and the display is neat:

. Errormsg {background-position: 0-30px; position: relative; top: 1px ;}

 

The result shows that, except IE6, the other items are normally moved down by 1 pixel.

However, IE6 is used for the cup, and it is moved, but its incorrect icon is gone, or it is displaced, and it is not neatly arranged with the text, as shown in the figure:

I try to remove position: relative; and it returns to normal again.

I did not expect that in IE6, the position: relative; and the background-position coordinates of the background image are also involved.

 

There is another way to solve this problem. When we add the floating point, it will be displayed as normal:

. Homepage {background-position: 0-24px; position: relative; top: 1px; float: Left ;}

 

I don't know if this is the case, so there are still a lot of Internet Explorer 6 traps.