Question

目标：创建带有CSS翻转的可点击按钮。该按钮为蓝色，当鼠标悬停在该按钮上时，颜色变为橙色。

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

这是一张有问题的图片：

有关如何解决此问题的任何想法？

当缩放设置为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

Answer 1

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

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

1 个答案: