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:-1px
的a
元素一样(。
我想这与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;
}