IE7で、JavaScriptを使って動的に要素を表示・非表示した場合、要素が重なってしまうことがあります。
- 実験ページ（注: 現在はご利用いただけません）
状況
- IE7だと問題が再現し、IE8やFirefoxは再現しません。
- 冒頭のDOCTYPE宣言を外してQuarksモードにしても再現しません。
- IE7でのみ、Showボタンを押すと、文字が重なってしまうはずです。
奇妙な動作
- 不思議なことに、21行目の
background指定を外すと、再現しません。 - また、21行目の
<div>開きと22行目の<div>開きの間に「スペース・TAB・改行以外の何か(コメントでも可)」を入れると、再現しません。 -
22行目の
height:2emは、hasLayoutがtrueになれば何でもOKです。
バグの再現条件
まとめると、
- ブロック要素Aがある。
- Aの最初の子要素はブロック要素Bである。
- AはCSSで背景がnone以外に指定されていて、
hasLayout=falseである。 - Bは
position:relativeであり、なおかつhasLayout=trueである。
これらの条件を満たす場合、「Aの前にある要素の高さが変わり、AのY座標が変更になっても、BのY座標は再計算されない」というIE7独自のバグと言えそうです。
DebugToolbar等で位置の再計算を行うと、正しい位置に移動します。
おそらく計算順序にバグがあるのだと思います。position:relativeを使うときは気をつけましょう。