Firefoxでopacityした要素をhoverすると、1pxずれるバグの対処法

題名のとおりなんですけど、ちょっとハマったのでメモ。

どういうこと？

a要素で囲んだimg要素を、ロールオーバーをopacityで操作することってあると思うんですが、他のブラウザでは問題ないけど、Firefoxだけhoverすると何故か1pxずれる問題があります。

a:hover {
    opacity: .6; /* これがずれる！！ */
}

対処法

背景色を指定してやれば治るみたいです。
どの色を指定してもいいみたいですが、色々な場面で使えるRGBAでしてしてあげるのがいいと思います。

a:hover {
    opacity: .6;
}
a img {
    background-color: rgba(255, 255, 255, .01); /* 透明度を低く指定しました。 */
}

白のopacityが0.01なんて、ほとんど見えないので、大丈夫だと思います。

同じことで困っている人の助けになれれば幸いです。