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

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

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状態になった瞬間にスクロールバーが出現し、右側にあるブロックが左に動く現象が発生します。

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

Search
オススメ書籍
Feeds

Return to page top