下面的精灵可以工作，但是在某些放大倍率下，图像的顶部会在鼠标悬停时向下移动，从而产生不需要的移动效果。问题出现在多个浏览器上。有什么线索吗？提前致谢。
<style>
.test {width:107px; height:51px;
background:url(http://img706.imageshack.us/img706/6812/navr.gif) no-repeat 0 0; }
.test:hover {background:url(http://img706.imageshack.us/img706/6812/navr.gif) no-repeat 0 -51px; }
</style>
<div class="test"></div>
编辑：我在网络上查看了其他一些精灵示例，并且在其他网站上也看到了这种情况！我花了很长时间研究这个问题，但我还没有看到任何地方提到 CSS 精灵的这个特定问题！
我的直觉告诉我，在我的代码中我绝对无法解决这个问题，而解决方案在于 gif 本身的创建。我希望我错了，并且有一些银色的 CSS 子弹！
编辑#2：我尝试使用“水平”精灵，即第二个导航栏位于第一个导航栏的右侧而不是下方。结果：更少的放大倍率产生了失真，但我发现水平偏移比垂直偏移更刺眼。
在我找到解决方案之前，我认为精灵不是我将使用的东西：我宁愿让客户再等一两秒钟来获取图像，也不愿让页面看起来不专业。