Issue with hover sprites and js in IE6(one pixel gap)

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;
}

The above code works in IE6+ and FF. But in IE6, when my mouse moves to the a element that triggers the .sbToggle:hover event, the background-image (background-position:0 -27px) have one pixel shift (like the a element with margin-top:-1px).

I guess it has to do with the DD_belatedPNG.js's vmlOffsets method. Does anyone have the same problem?

==============updated===============

i found a description about one pixel shift) at 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

It seems to me that if you are supporting IE6, then you probably have (or will have by the time you are done) a way of targeting css just for IE6 (conditional comments or some other means). If that is so, then the easiest solution is to use whatever means you are using to target IE6 and then just change your css for IE6 to:

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