IE7でposition:relativeの要素が重なるバグ

IE7で、JavaScriptを使って動的に要素を表示・非表示した場合、要素が重なってしまうことがあります。

状況

  • IE7だと問題が再現し、IE8やFirefoxは再現しません。
  • 冒頭のDOCTYPE宣言を外してQuarksモードにしても再現しません。
  • IE7でのみ、Showボタンを押すと、文字が重なってしまうはずです。

奇妙な動作

  • 不思議なことに、21行目のbackground指定を外すと、再現しません。
  • また、21行目の<div>開きと22行目の<div>開きの間に「スペース・TAB・改行以外の何か(コメントでも可)」を入れると、再現しません。

  • 22行目のheight:2emは、hasLayouttrueになれば何でもOKです。

バグの再現条件

まとめると、

  • ブロック要素Aがある。
  • Aの最初の子要素はブロック要素Bである。
  • AはCSSで背景がnone以外に指定されていて、hasLayout=falseである。
  • Bはposition:relative であり、なおかつhasLayout=trueである。

これらの条件を満たす場合、「Aの前にある要素の高さが変わり、AのY座標が変更になっても、BのY座標は再計算されない」というIE7独自のバグと言えそうです。

DebugToolbar等で位置の再計算を行うと、正しい位置に移動します。

おそらく計算順序にバグがあるのだと思います。position:relativeを使うときは気をつけましょう。

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ

BPSアドベントカレンダー