1

下のスプライトは機能しますが、特定の倍率では、画像の上部がマウスオーバー時に1滴下に移動し、不要な移動効果が発生します。この問題は複数のブラウザで発生します。手がかりはありますか?前もって感謝します。

<style>
.test   {width:107px; height:51px;
background:url(http://img706.imageshack.us/img706/6812/navr.gif) no-repeat 0 0; }
.test:hover {background:url(http://img706.imageshack.us/img706/6812/navr.gif) no-repeat 0 -51px; }
</style>
<div class="test"></div>

編集:私はウェブ上で他のいくつかのスプライトの例を見てきました、そして私はこれが他のサイトで起こっているのを見ました!私はこれを研究するのにかなり長い時間を費やしましたが、cssスプライトに関するこの特定の問題について言及しているページはまだどこにもありません!

私の直感によると、この問題を修正するためにコードでできることは絶対にありません。解決策はgif自体の作成にあります。私が間違っていて、CSSの銀の弾丸があることを願っています!

編集#2:「水平」スプライトを試してみました。つまり、2番目のナビゲーションバーは最初のナビゲーションバーの下ではなく右側にありました。結果:倍率を下げると歪みが発生しましたが、水平方向のシフトは垂直方向のシフトよりも目に不快感を与えることがわかりました。

これに対する解決策が見つかるまで、スプライトは私が使用するものではないと思います。プロ並みのシフトのあるページを作成するよりも、クライアントに画像を取得するためにさらに1〜2秒待ってもらいたいと思います。

4

1 に答える 1

0

通常、私は背景位置を使用します

#menu li a{background:url('/resources/menuIcons.png');display:block;float:left;height:70px;text-indent:-9999px;width:70px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:0px -70px;}

そのようにコードを構造化してみてください

于 2012-04-21T10:14:40.737 に答える