memo.xight.org

日々のメモ

アンカーのマウスオーバーで position:relative; なブロックが逃げる WinIE のバグ

Summary

  アンカーのマウスオーバーで一部のブロック要素が移動してしまう.
  バグ再現ドキュメント
  バグを利用した動画

ポイント

・スイッチとなるアンカーへの border 指定 (本数に限りはない)
・リストの入れ子
・スイッチとなるアンカーより上の階層にある li への padding-top・padding-bottom 指定?
・スイッチとなるアンカーより後に出現するブロックへの position : relative; 指定 (複数可)
IE のデフォルトスタイルシート

HTML

<ul>
	<li>
		<ul>
			<a href="#">スイッチ</a>
		</ul>
	</li>
</ul>
<blockquote>下がって行くブロック<blockquote>
<div>下がって行くブロック</div>
<pre>下がって行くブロック</pre>

CSS

a:hover, a:active{
	border-bottom : 1px solid;
}
li{
	padding-top : 1px;
	padding-bottom : 1px;
}
p, div, blockquote, pre{
	position : relative;
}

Reference

  Black Box - 2004-11-21
  http://orz.cc/blog/2004/11/21