Chrome缩放时,CSS图像翻转无法正确显示

目标:创建一个带有CSS翻转的可点击按钮.该按钮用于蓝色,当鼠标悬停在该按钮上时,颜色变为橙色.

问题:我的技术适用于主流浏览器(Chrome,Firefox,IE).但是当我缩放页面时(默认情况下我在Chrome中),当鼠标悬停在按钮顶部时,按钮顶部会出现一条小的水平蓝线

这是一个有问题的图像:

http://hostpicture.eu/?di=JZ05

关于如何解决这个问题的任何想法?

缩放设置为100%时没有问题.但是,只要我在Chrome中将缩放设置为110%或120%,它就会出现.我在Firefox中测试了具有不同缩放值的页面,完全没有问题.我也在IE9中测试过.对于100%,125%,200%的变焦没有问题,但是对于150%的变焦出现相同的问题.

我用过的代码:

HTML:

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

CSS:

.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;
}

我使用的图像(每个按钮是135px X 33px.整个图像是135px X 66px):

http://hostpicture.eu/?di=1GL1

最佳答案
在你的图像中,按钮相互接触 – 将图像中的按钮分开几个像素,这应该可以解决问题.

转载注明原文:Chrome缩放时,CSS图像翻转无法正确显示 - 代码日志