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

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

テキストの場合

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

HTML

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

CSS

1
2
3
4
5
6
a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
    zoom: 1;
}

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

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

CSS

1
2
3
a {
    display: inline-block;
}

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

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

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

CSS

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

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

画像の場合

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

HTML

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

CSS

1
2
3
4
5
6
a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
    zoom: 1;
}

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

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

CSS

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

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

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

CSS

1
2
3
a {
    display: inline-block;
}

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

【参考サイト】

 

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2025年3月
 1
2345678
9101112131415
16171819202122
23242526272829
3031