4

目的: CSS ロールオーバーでクリック可能なボタンを作成する。ボタンは青色で、マウスがその上にあると、色がオレンジ色に変わります。

問題: 私の手法は、主要なブラウザー (Chrome、Firefox、IE) で問題なく動作します。しかし、ページをズームすると（Chromeではデフォルトでズームします）、マウスがボタンの上にあると、ボタンの上部に小さな水平の青い線が表示されます

問題のある画像は次のとおりです。

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

この問題を解決する方法についてのアイデアはありますか?

Zoom が 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 に答える