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

Posted 2023-03-06

【中文标题】在 Internet Explorer 中悬停时背景图像跳跃 1px

【英文标题】：Background-image jumps 1px on hover in Internet Explorer

【发布时间】：2012-11-09 20:03:57

【问题描述】：

这个奇怪的 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; 

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

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

正常状态：

悬停状态：

因为“跳跃”行，文本也会跳跃（在我的示例中几乎看不到，但在我的项目中你会看到它非常好）。已在 Win7 上使用 IE9 及更低版本进行测试。

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

【问题讨论】：

您的小提琴在 IE9、Win7 中运行良好

您的小提琴在 IE8、WinXP 中运行良好

在 WinXP 上的 IE7/8 中运行良好。

您的 HTML 和 CSS 是否验证无误？ （validator.w3.org 和jigsaw.w3.org/css-validator）

MarcoK - 当您从 jsfiddle 在 IE 中查看它时，是否会发生错误？如果没有，并且它只出现在您的本地计算机上，您是否使用 css 重置文件首先摆脱所有填充/边距等？

【参考方案1】：

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

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

再次感谢您的帮助！