opacityを適用した時にオンマウスで画像が1px動いてしまったりするバグの解決法

2013年3月27日

opacityを適用した時にオンマウスで画像が1px動いてしまったりするバグの解決法

今回は透明度を指定するためのプロパティ「opacity」で発生したバグの解決法を書いていきます。まずは「.opacity」というクラスに、opacityの指定を行ないます。

.opacity:hover{
	filter:alpha(opacity=80); /*IE*/
	-moz-opacity:0.8; /*Firefox*/
	opacity:0.8; /*Opera・Safari*/
}

そしてこの「.opacity」を画像に適用します。

<img src="画像パス" class="opacity">

これでオンマウスすると画像が透明になるのですが、Firefoxのみ、オンマウス時に画像が1px動いたり、ひどい時は画像が無くなるような時も。これは背景指定が原因のようで、backgroundの指定を追記する事で解決できます。

background: #fff;

これでFirefoxの問題が解決出来たかと思いきや、backgroundを指定したままだとIE8でバグが発生。そこで今度は下記指定を追記することで、IE8のエラーが無くなりました。

display: inline-block;
zoom: 1;

これで大丈夫かと思いきや、もう一度Firefoxで確認してみると、またバグが発生してしまいました。さすがにストレートな記述だけでは解決出来そうになかったため、この時ばかりはハックに頼り、最終的には下記のような書き方で全ブラウザの表示を統一する事ができました。

.opacity:hover{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}

/* IE8 */
html>/**/body .opacity:hover {
	display /*\**/:inline-block\9;
	zoom /*\**/: 1\9;
}

/* 新旧Firefox */
.opacity:hover, x:-moz-any-link { background: #fff;}
.opacity:hover, x:-moz-any-link, x:default { background: #fff;}

【参考】