IE8でリンクへのopacityが効かない

IE8でaタグを透過させたときの挙動がおかしかったので、対応方法をメモしておきます。

テキストの場合

下記のような形でオンマウス時に透過させたときに、IE8で透過処理が効きませんでした。

HTML

<a href="">テキストリンク</a>

CSS

a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
	zoom: 1;
}

IE8でリンクへのopacityが効かないのデモページ
　

インライン要素だと効かないようなので、display:inline-block;を指定して対応しました。

CSS

a {
	display: inline-block;
}

今回はdisplay:inline-block;を指定しましたが、ブロック要素に変更でも問題ありません。

IE8でリンクへのopacityが効かないのデモページ2
　

これで透過が効くようになりましたが、IE8でオンマウス時にテキストが少し動いてしまっています。
これはline-heightを指定することで対応できました。

CSS

a {
	display: inline-block;
	line-height: 1;
}

IE8でリンクへのopacityが効かないのデモページ3
　

画像の場合

画像の場合も同じく、オンマウス時に透過が効きませんでした。

HTML

<a href=""><img src="image.jpg" /></a>

CSS

a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
	zoom: 1;
}

IE8でリンクへのopacityが効かないのデモページ4
　

調べてみると、画像自体に透過処理を追加するときちんと効くようでした。
IE8で効いていないので、画像オンマウス時にIE8用の記述のみ追加しました。

CSS

a:hover img {
	-ms-filter: "alpha(opacity=50)";
}

IE8でリンクへのopacityが効かないのデモページ5
　

これでオンマウス時の透過の対応ができました。
もしくは、テキスト時と同じようにaタグにdisplay:inline-block;を指定しても対応できました。

CSS

a {
	display: inline-block;
}

IE8でリンクへのopacityが効かないのデモページ6
　

【参考サイト】

• [CSS]IE8にも対応したクロスブラウザ用の不透明度の指定方法 | コリス
• CSSで要素を透過させるopacityの挙動について、ブラウザ毎に調べてみた | ビットログ
• IE8でopacityが効かない時の対処法: いろいろ備忘録 – ウェブ業界人の技術ブログ