body要素やhtml要素にoverflowプロパティなどを指定しており、かつ:hover擬似クラスに何らかのスタイル(特に背景色やボーダーなど)を指定しているとき、アンカーが:hover状態になるたびにbody要素のサイズやhtml要素のサイズなどが変化することがある。また場合によってはリンクが機能しなくなることもある。
例示
検証ページ(fig1.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="#xx">link</a></li><li><a href="#xx">link</a></li><li><a href="#xx">link</a></li>.....
</ul>
</div>
<ul id="xx">
<li><a href="#xx">link</a></li><li><a href="#xx">link</a></li><li><a href="#xx">link</a></li>.....
<li><a href="#xx"><img src="http://css-bug.jp/img/common/img01.png" alt="★"></a></li>.....
</ul>
検証ページを開き、画面右側にあるアンカーの上にマウスポインタ等を何度か乗せてください。
補足
前出の例では、html要素にheightプロパティで具体的な値を指定することでバグを回避できます。または、:hover擬似クラスで背景やボーダーを指定しないことで回避できる場合もあります。
修正状況
- N7.02標準モード、N7.02互換モードで不具合の発生が確認されました。
- Moz1.4rc1では不具合の発生頻度は下がっているようです。ただしこのページの例示では、:hover状態になった瞬間にスクロールバーが出現し、右側にあるブロックが左に動く現象が発生します。


