html要素とbody要素にoverflowプロパティなどを指定し、かつ:hover擬似クラスに対して背景色を指定しているとき、アンカーが:hover状態になる度にbody要素の幅や高さが縮む。
- Category: Internet Explorer, Windows, ver.6
- Tag: :hover, body
例示
<style type="text/css">
<!--
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
width: 100%;
height: 100%;
overflow: auto;
}
a:hover {
background-color: #00ffff;
}
-->
</style>
<p><a href="./">リンク</a></p>
<p><a href="./">リンク</a></p>
.....これはhtml要素のスクロールバーを消し、その代わりにbody要素にスクロールバーを設置するスタイルです。アンカーの上にマウスポインタ等を何度か乗せてください。
実際の表示については検証ページをご覧ください。
補足
a:link擬似クラスやa:visited擬似クラスに指定する背景と、a:hover擬似クラスに指定する背景を同じものにすることでバグを回避できます。
<style type="text/css">
<!--
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
width: 100%;
height: 100%;
overflow: auto;
}
a:link, a:visited {
background-color: #00ffff;
}
a:hover {
background-color: #00ffff;
}
-->
</style>
<p><a href="./">リンク</a></p>
<p><a href="./">リンク</a></p>
.....修正状況
- WinIE6.0標準モードで不具合の発生が確認されました。
- WinIE5.5、WinIE6.0互換モードでこの不具合は発生しません。
