Css 背景图像在Internet Explorer中悬停时跳跃1px

有一个奇怪的IE问题一直困扰着我。它在其他浏览器（Chrome/Firefox）中正常工作

对于那些想直接深入代码的人，下面是。重要部分：

HTML:

在小提琴中，我添加了一个箭头来显示图像的正确“中心”。如您所见，这只是一个用于导航的简单的图像精灵。图像的高度是实际按钮高度的两倍，因此我们可以应用

背景位置：bottom

但由于某些原因，当鼠标悬停时，IE无法正确显示图像。不知何故，箭头（黑线）和中心线（悬停状态下的红线）不再对齐：

正常状态：

悬停状态：

因为行“跳跃”，文本也会跳跃（在我的示例中几乎不明显，但在我的项目中，您会看到它非常好）。Win7上的IE9及以下版本已测试和出现

---

我希望你能找到解决这个脑筋急转弯的办法

上面来自jQuerybeast、Miguel-F和Billy Moat的评论将我推向了另一个方向（谢谢大家！），我试图在另一台机器上打开小提琴。相同的浏览器，相同的操作系统&它工作正常

经过进一步调查，我发现是我的屏幕分辨率和/或视频显示和/或任务栏造成了这种奇怪的效果。这意味着我的代码是正确的，但不知何故IE在屏幕上绘制了一些错误的像素（其他浏览器都是这样做的）。但这可能是一个全新的问题

---

再次感谢你的帮助

你的提琴在IE9中运行良好，Win7在IE8中运行良好，WinXP在WinXP上的IE7/8中运行良好。你的HTML和CSS验证没有错误吗？（和）Marck—当您从JSFIDLE在IE中查看它时，是否会发生错误？如果没有，并且它只出现在您的本地计算机上，您是否首先使用css重置文件来清除所有填充/边距等？

<a href="#" class="btn">MyButton</a>

.btn {
    display:block; width:135px; height:58px; text-indent: -9999px;
    background-image:url("http://i47.tinypic.com/e7f4w6.png");
}

.btn:hover { background-position:bottom; }