Question

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)有一个像素移位（如a元素margin-top:-1px 1}}）。

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

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

我在DD_belatedPNG site

找到了关于一个像素移位的说明

- 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]

Answer 1

在我看来，如果你支持IE6，那么你可能已经（或者在你完成时将会有）一种针对IE6的方法（条件评论或其他方式）。如果是这样，那么最简单的解决方案是使用你用来定位IE6的任何方法，然后只需将IE6的css更改为：

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

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

1 个答案: