Firefoxのマウスオーバーが揺れる（ピクセルずれ）場合のCSS設定

10年も前なら、ホームページデザインが出来れば、仕事は完了したも同然でした。
しかし、今はHTMLを組みあげるのが大変です。

ブラウザ毎のCSS解釈に違いがあるので、どうしてもデザイン通り行かない。
個別のブラウザに対してCSSハックするか、どうするか。

そんな毎日の悩みが一つ解決しましたので、お知らせします。

Firefoxのマウスオーバーが揺れる

ボタンのマウスオーバーで画像を半透明にすることは、よくあります。
他のブラウザは大丈夫なのに、Firefoxだけがピクセルズレ（1pxずれる・ブレたように見える）を起こす現象にずっと悩まされていました。
いままで、画像をブロック化したりして、あの手この手で乗り切ってきたのですが…

一発解決の方法を発見

a img{
box-shadow: #000 0 0 0 ;
}

たったこれだけcssに記述しておけば、改善しました。
とにかくやってみてください。

by T.Y.