:hoverへの設定が適用されるたびにa要素がずれてゆく

症状

:hover内にpositionやfont-weightなど、特定のプロパティが指定されているa要素が複数行に渡って連続して置かれているとき、a要素にマウスポインタなどが乗るたびにa要素が移動する。

例示

<style type="text/css">
a {
  font-weight: normal;
}
a:hover {
  font-weight: bold;
}
</style>

<p><a href="../macie.html">MacIE目次</a>/<a href="../macie.html">MacIE目次</a>……</p>

マウスポインタなどが乗ったときは太字で表示させます。上の例示が複数行に渡って表示されていない場合はウィンドウの幅を狭くしてからマウスポインタを乗せたり離したりを繰り返してみてください。

スクリーンショット

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

補足

:hoverに対して position: relative; left: 0; top:0; と指定するとこのバグを回避できます。この手法を使用できない場合はバックスラッシュハックなどで:hover自体を無視させてください。

<style type="text/css">
a {
    font-weight: normal;
}
a.f:hover {
    font-weight:bold;
    position: relative;
    left: 0;
    top: 0;
}
</style>

<p><a href="../macie.html" class="f">MacIE目次</a>/……</p>

修正状況

MacIEで発生する模様。

スポンサーリンク

関連記事

スポンサーリンク

4Kモニタで画面がたまに点いたり消えたりしてちらつくときの対処法

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

上に戻る