2

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

对于那些想直接深入代码的人来说，这里有一个 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 及更低版本测试并发生。

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

4

1 回答 1

0

上面 jQuerybeast、Miguel-F 和 Billy Moat 的评论把我推向了另一个方向（谢谢大家！），我试图在另一台机器上打开我的 Fiddle。相同的浏览器，相同的操作系统，运行良好。

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

再次感谢您的帮助！

于 2012-11-21T15:09:56.547 回答