Question

下面的精灵有效，但在某些放大倍率下，鼠标悬停时图像的顶部会向下移动，从而产生不必要的移动效果。多个浏览器都会出现此问题。有线索吗？提前谢谢。

<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 sprites提到这个特定问题！

我的直觉告诉我，在我的代码中我无法做任何事情来解决这个问题，并且解决方案在于gif本身的创建。我希望我错了，并且有一些银色的CSS子弹！

编辑＃2：我尝试使用＆＃34;水平＆＃34;精灵，即第二个导航栏位于第一个导航栏的右侧而不是下方。结果：较少的放大率产生失真，但我发现眼睛的水平移动比垂直移位更容易刺痛。

在我找到解决方案之前，我认为精灵不是我将要使用的东西：我宁愿让客户等待另外一两秒来获取图像而不是一个不专业的页面轮班。

Answer 1

通常我使用背景位置

#menu li a{background:url('/resources/menuIcons.png');display:block;float:left;height:70px;text-indent:-9999px;width:70px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:0px -70px;}

尝试像这样构建代码

CSS Sprite在特定缩放倍率下鼠标悬停时“移动”

1 个答案: