オリジナルではない幅の値で表示される画像に標準の :hover を使用すると、マウスオーバーが有効になったときにアニメーションがわずかに揺れることに気付きました。これはピクセルの丸めが原因だと思いますが、ホバーしたときに表示される画像が異なるのはなぜですか?
http://jsfiddle.net/z29LM/8/で私のテスト ケースを参照してください。
最初の 2 つの画像はホバーしても問題ありませんが (元の画像の幅/高さを使用するため)、他のすべての画像は右と下に 1 ピクセルほど追加されているように見えます。どの種類のホバー効果が適用されるかは問題ではないようです (たとえば、背景色は同じ問題につながります)。
回避策は、Gimpを開いて画像をターゲットの幅/高さに手動で調整することのようですが、この現象に対するhtml/cssの修正はありますか?
編集:
これは Firefox のみのバグのようです (13.0.1 を使用)。回答に投稿されたリンクはbox-shadow: #000 0em 0em 0em;、画像要素に追加することによる簡単な修正を提案しています。修正済み/動作中のバージョンについては、 http://jsfiddle.net/z29LM/9/を参照