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

Question

这个奇怪的IE问题一直在扭曲我的想法。它在其他浏览器（Chrome / Firefox）中运行正常。

对于那些想直接潜入代码的人来说，这里是a Fiddle。重要部分：

HTML：

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

CSS：

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

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

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

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

正常状态：

悬停状态：

因为线条“跳”，文字也会跳跃（在我的例子中几乎不引人注意，但在我的项目中你看到它非常好）。经过测试和测试在Win7上以IE9及以下版本发生。

我希望你可以为这个小小的脑筋急转弯找到解决方案！

Answer 1

来自jQuerybeast的评论，Miguel-F＆amp; Billy Moat上面把我推向了另一个方向（感谢大家！），我试图在另一台机器上打开我的小提琴。相同的浏览器，相同的OS＆amp; 工作正常。

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

再次感谢您的帮助！