1

私の Web サイトには、背景画像と jQuery ホバー イベントから作成されたボタンを含むヘッダーがあります。問題は、Chrome と Chrome のみ (私のテスト) で、ボタンの上にマウスを移動すると、ホバー画像が約 1 ピクセルだけわずかに切り取られることです。いくつかテストしたところ、スクロールバーがある場合にのみ表示されることがわかりました（一貫性を保つために、overflow-yを追加しました：すべてのページにスクロールします）。幅から 0.5 ピクセルを差し引くと問題は解決しますが、余白も台無しになります。背景画像は同じサイズの 102x42px です。

ここに私のCSSと私のウェブサイトへのリンクがあります:

.menubutton
{
margin:0px auto;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
.menubutton:hover
{
background:url('../img/buttons/menuhover.png');
color:#E0E0E0;
text-shadow: 0px 0px 1px rgba(0,0,0,0.75);
}
4

2 に答える 2

3

私はバグを確認し、ランディのように、これはクロムの問題であり、コードではないと思います。ページの幅が原因で問題が発生したり消えたりするようです。ウィンドウのサイズを変更すると、問題が発生したり消えたりします。

いくつかの試行錯誤の後、問題の一部はメニューボタンをカプセル化するサイズ td 要素に起因するようです。いくつかのことを試した後、回避策を見つけました。td 要素と menubutton の両方のサイズがわかっているので、自動マージンは必要ありません。そう：

.menubutton
{
margin:0px 24px;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}

あなたの側でテストして、問題が解決するかどうかを確認できますか?

于 2012-09-23T20:27:47.950 に答える
0

あなたの問題はわかりますが、コードのバグではなく、クロムのバグのように見えます。4 つの要素のうち 2 つに正しいホバー バックグラウンドがあるため、少し奇妙です。ホバーで要素の幅を再度設定するか、要素を 1 ピクセル広くして background-repeat:none; を設定することができます。余分なピクセルを表示します。悪い解決策ですが..

于 2012-09-23T20:16:37.647 に答える