css - IE9 渲染 sprite hover image 1px off/blurred

Question

我正在使用一个 sprite，它有我的按钮图像和悬停图像(稍微暗一点)。

这是 CSS - 我的图片高 31 像素:

a
{
    background-position: 0 0;
}

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

当我悬停时，背景在所有浏览器中看起来都很好，但在 ie9 中它看起来有点模糊并且似乎向上移动了一个像素(-30 像素)。

Answer 1

与其将背景应用于 anchor ，不如尝试制作一个 div，将背景应用于其，然后将其包裹在 anchor 标签中。根据我的经验， anchor 更难设置样式。

此外，图像是否被缩放？在图像编辑器中打开您的图像，确保它的宽度和高度完全符合您的要求，保存它，并为您的 div，

高度:y像素； 宽度:x像素；

图像模糊的最常见原因是浏览器缩放不当，请确保图像默认大小正确，这样浏览器就不会尝试缩放它。还可以在 chrome、safari 或 firefox 中使用元素检查器来检查是否有另一位 css 正在调整背景大小或 div 的高度/宽度。

如果这不起作用，我必须看到一个链接或至少一个包含更多代码的屏幕截图，以进一步排除故障。