缩放Chrome时，CSS图像滚动显示不正确

目标：创建带有CSS滚动的可点击按钮。按钮应为蓝色，当鼠标置于按钮上方时，颜色将变为橙色

问题：我的技术适用于主要浏览器（Chrome、Firefox、IE）。但是当我缩放页面时（我在Chrome中默认这样做），当鼠标在按钮上方时，按钮顶部会出现一条蓝色的小水平线

下面是一张有问题的图片：

有什么办法解决这个问题吗

将缩放设置为100%时没有问题。但当我在Chrome中将缩放设置为110%或120%时，它就会出现。我用不同的缩放值在Firefox中测试了页面，没有任何问题。我还测试了IE9。100%、125%、200%的缩放没有问题，但150%的缩放也会出现同样的问题

我使用的代码：

HTML:

我使用的图像（每个按钮为135px 33px，整个图像为135px 66px）：

---

在您的图像中，按钮相互接触-将图像中的按钮分开几个像素，这应该可以解决问题。

我在Chrome中默认会这样做-为什么？尝试将按钮分开图像中的几个像素（不要让它们接触）-这可能会解决问题。@JaredFarrish:我的电脑屏幕离我有点远。为了补偿这一点，我必须缩放文本。默认情况下，我只在chrome中缩放，因为它是我通常使用的浏览器。允许缩放网页也是一个很好的可访问性习惯（老年人更难看到小文本，通常会缩放文本）。@Nathan:我用5px分隔图像，这就成功了。谢谢你的提示：）很高兴听到！我加上它作为答案。

<div class="ExerciseButtons">
    <a href="#">Check solution</a>
    <a href="#">Next exercise</a>
</div>

.ExerciseButtons{
margin-top:40px;
padding-left:30px;
}

.ExerciseButtons a{
margin-right:20px;
width:135px;
height:33px;
display:block;
color:white;
background-image: url("images/EmptyNextExerciseButton.png");
background-position: top left;
background-repeat: no-repeat;
text-align: center;
line-height:33px;
font-weight: bold;
text-decoration: none;
vertical-align: middle;
float:left;
font-family: Arial, Helvetica, sans-serif;
}

.ExerciseButtons a:hover {
    background-position: bottom left;
    color:white;
}