:hover状態で配置を行うと当該要素と周囲のレイアウトが大きく乱れる

症状

:hover擬似クラスに対してpositionプロパティによる相対/絶対配置のスタイル指定を行うと、擬似クラスにマッチしたときにマッチした要素やその周囲の文字列などのレイアウトが乱れてしまう。

例示

<style type="text/css">
a.sa:hover {
  position: relative;
  left: 1px;
}
</style>

<p><span>:hover状態……◇<a class="sa" href="…">リンク1リンク</a>
……◇<a class="sa" href="…">リンク4リンク</a></span></p>

:hover状態で配置を行うと当該要素と周囲のレイアウトが大きく乱れる◇リンク1リンクリンク2リンクリンク3リンクリンク4リンク

:hover擬似クラスで相対配置を行っています。リンク文字列にマウスポインタ等を乗せてください。なお、文章が2行に渡って表示されている状態でバグが発生しやすいようです。

スクリーンショット

WinIE6WinIE6.0での表示(標準モード)

N6.2N6.2.2での表示(標準モード)

補足

このバグは、親要素がインライン要素の場合に発生しやすくなるようです。上の例示の場合はspan要素を取り除いて、a要素をp要素の子要素にするとバグを回避できます。

修正状況

N6.2.2/Moz1.0.2/Moz1.3では標準・互換モードともに不具合の発生が確認されました。

関連記事

スポンサーリンク

regex_replace修飾子 正規表現による検索・置換を行う

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る