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が効かない時の対処法: いろいろ備忘録 – ウェブ業界人の技術ブログ
コメントが承認されるまで時間がかかります。