IE6中悬停精灵和js的问题(一个像素间隙)



JS:

DD_belatedPNG js

HTML:

<script type="text/javascript" src="js/fixpng.js"></script>
<a href="#" class="sbToggle"></a>

CSS:

.sbToggle{
    background: url(/img/select-icons-trans.png) 0 0 no-repeat;
    display: block;
    height: 27px;
    outline: none;    
    width: 31px;
}
.sbToggle:hover{
    background: url(/img/select-icons-trans.png) 0 -27px no-repeat;
}

上面的代码适用于IE6+和FF。但在IE6中,当我的鼠标移动到触发.sbToggle:hover事件的a元素时,背景图像(background-position:0 -27px)会有一个像素偏移(就像margin-top:-1pxa元素一样(。

我想这与DD_belatedPNG.js的vmlOffsets方法有关。有人有同样的问题吗?

================更新================

我在DD_belatedPNG站点上找到了一个关于一个像素偏移的描述

- the one pixel gap problem has been mostly solved. Few people noticed, 
but it bugged me, and was VERY hard to fix.[0.0.6a / 2008.12.14]

在我看来,如果您支持IE6,那么您可能已经(或将已经(有一种针对IE6的css的方法(条件注释或其他方式(。如果是这样的话,那么最简单的解决方案就是使用你正在使用的任何手段来瞄准IE6,然后只需将IE6的css更改为:

.sbToggle:hover{
    background: url(/img/select-icons-trans.png) 1px -27px no-repeat;
}

最新更新