IE8でマウスオーバー時に中の要素がずれる不具合に対応

html5はインライン要素とかブロック要素とか気にしなくてもいいらしいので、全体をaタグで囲うようなリンクを設定しました。

こんな感じです。

で、上記リンクに対してマウスオーバーしたとき透過するように設定しました。

一通りコーディングが終わり、いざブラウザチェックを行うと「そう簡単に終わらすかよヴァァァァァカwwww」と言わんばかりにあいつがしゃしゃり出てきやがりました。今回のくそ野郎はIE8です。

IE8でのみマウスオーバーしたときにテキストが左にずれるという現象が発生してしまいました。
※IE8でサンプルの対策前のリンクにマウスオーバーさせてみてみるとわかると思います。
googleさんに問い合わせながら格闘すること3時間、結局下記のサイトで紹介されていた方法で解決できました。

a:link擬似クラスやa:visited擬似クラスに指定する背景と、a:hover擬似クラスに指定する背景を同じものにすることでバグを回避できます。

アンカーを:hover状態にするとbody要素のサイズが縮む-ぺんたん info

条件付きコメントを設定してあるので、上記サイトを参考にIE8以下に有効になるように書きました。

  • a:link a:visited a:hover 全く同じように書かないとずれました。
  • a:link a:visited は透過しては困るのでopacityを1に設定しています。

言葉で説明するのアレだし、あくまで自分向けの備忘録だから、後でサンプルを見ればわかるようにしておきます。

投稿日
カテゴリ