サイト制作に関するメモ書き

HOME > HTML・CSS > IE8でリンクへのopacityが効かない

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
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP