IE9 rendering sprite hover image 1px off/blurred

I'm using a sprite to that has my button image and a hover image (slightly darker).

Here's the CSS - my i开发者_高级运维mage is 31px tall:

a
{
    background-position: 0 0;
}

a:hover
{
    background-position: 0 -31px;
}

When I hover the background looks fine in all browsers but ie9 where it looks slightly blurred and appears to shift up one px (-30px).

Instead of applying the background to an anchor, try making a div, applying the background to that, then wrapping it in anchor tags. In my experience, anchors are much harder to style.

Also, is the image being scaled at all? Open your image in an image editor and make sure it's EXACTLY the width and height you want it, save it, and for your div,

height: y px; width: x px;

The most common reason for blurry images is poor browser scaling, make sure the image is the right size by default, so the browser won't try to scale it. Also use your element inspector in chrome or safari or firefox to check if another bit of css is resizing the background or the height/width of the div.

If that doesn't work, I'd have to see a link or at least a screenshot with more code to troubleshoot further.

another thing to look at as well is to make sure that your zoom level isn't anything but 100%. I can't count the amount of times I accidentally ctrl+mousewheel upping the zoom level slightly to 105%.