アンカーを:hover状態にするとbody要素などのサイズが変化する

症状

body要素やhtml要素にoverflowプロパティなどを指定しており、かつ:hover擬似クラスに何らかのスタイル(特に背景色やボーダーなど)を指定しているとき、アンカーが:hover状態になるたびにbody要素のサイズやhtml要素のサイズなどが変化することがある。また場合によってはリンクが機能しなくなることもある。

例示

検証ページ(b055a.html):

<style type="text/css">
html {
  overflow: auto;
}
body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}
a:hover {
  background: aqua;
}
div.menu {
  position: absolute;
  top: 0;
  right: 10px;
  width: 150px;
}
div.menu a {
  display: block;
  width: 145px;
}
div.menu a:hover {
  border: 1px solid red;
}
</style>

<div class="menu">
<ul>
<li><a href="#id">link</a></li>……
</ul>
</div>
<ul id="xx">
<li><a href="#id">link</a></li>……
<li><a href="#id"><img src="/img/cssbug/mozilla/img01.png" alt="★"></a></li>……
</ul>

検証ページを開き、画面右側にあるアンカーの上にマウスポインタ等を何度か乗せてください。

補足

前出の例では、html要素にheightプロパティで具体的な値を指定することでバグを回避できます。または、:hover擬似クラスで背景やボーダーを指定しないことで回避できる場合もあります。

修正状況

  • N7.02標準モード、N7.02互換モードで不具合の発生が確認されました。
  • Moz1.4rc1では不具合の発生頻度は下がっているようです。ただしこのページの例示では、:hover状態になった瞬間にスクロールバーが出現し、右側にあるブロックが左に動く現象が発生します。

関連記事

スポンサーリンク

$template_dirクラス変数 テンプレートディレクトリの名前

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

上に戻る