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

スクリーンショット

補足

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

修正状況

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

スポンサーリンク