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;} |
インライン要素だと効かないようなので、display:inline-block;を指定して対応しました。
CSS
1 2 3 | a { display: inline-block;} |
今回はdisplay:inline-block;を指定しましたが、ブロック要素に変更でも問題ありません。
これで透過が効くようになりましたが、IE8でオンマウス時にテキストが少し動いてしまっています。
これはline-heightを指定することで対応できました。
CSS
1 2 3 4 | a { display: inline-block; line-height: 1;} |
画像の場合
画像の場合も同じく、オンマウス時に透過が効きませんでした。
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で効いていないので、画像オンマウス時にIE8用の記述のみ追加しました。
CSS
1 2 3 | a:hover img { -ms-filter: "alpha(opacity=50)";} |
これでオンマウス時の透過の対応ができました。
もしくは、テキスト時と同じようにaタグにdisplay:inline-block;を指定しても対応できました。
CSS
1 2 3 | a { display: inline-block;} |
【参考サイト】
- [CSS]IE8にも対応したクロスブラウザ用の不透明度の指定方法 | コリス
- CSSで要素を透過させるopacityの挙動について、ブラウザ毎に調べてみた | ビットログ
- IE8でopacityが効かない時の対処法: いろいろ備忘録 – ウェブ業界人の技術ブログ
コメントが承認されるまで時間がかかります。