position:relative与IE6的最新恩怨

偶然，真的是偶然，非常之偶然，发现了position:relative与IE6真的有1腿！

 

直接看例子：

一般我们经常使用sprite背景图来定义某条文字前的ICON图标，如下图，错误提示图标：

 

 

一般我们这么设置：

<em class="tip errormsg">请输入2-4个中文！</em>

.tip{background:url(../images/icon.png) no-repeat -99999px 0;}

.errormsg{background-position:0 -30px;} 比如那出错的图标在此坐标上。

这种情况下，所有浏览器都是正常的，图标和文字排列很整齐。

 

但有时候我们需要把错误提示整体往下挪1像素，让提示与左边输入框平行，看的整齐点：

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

 

结果发现了什么，除了IE6，其他是正常向下挪了1像素。

但杯具的是IE6，挪是挪了，但它的错误图标没了，或位移了，和文字排的不整齐了，见图：

我试着把position:relative;去掉，它又回复正常。

真没想到在IE6下，position:relative;与背景图的background-position坐标也有牵扯了。

 

还有种解决办法，再加上浮动就会显示正常了：

.homepage{background-position:0 -24px; position:relative; top:1px; float:left;} 

 

不知道大家有没碰到这种情况，所以说，IE6的陷进还是蛮多的啊。