アンカーを: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="b110.html">WinIEバグ110</a></p>
<p><a href="b110.html">WinIEバグ110</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="b110.html">WinIEバグ110</a></p>
<p><a href="b110.html">WinIEバグ110</a></p>
……

修正状況

  • WinIE6.0標準モードで不具合の発生が確認されました。
  • WinIE5.5、WinIE6.0互換モードでこの不具合は発生しません。

関連記事

スポンサーリンク

<CENTER> センタリング(中央揃え)する

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

上に戻る