4

目标：创建一个带有 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

4

1 回答 1

1

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

于 2012-09-03T09:44:50.643 回答