IE7で絶対配置した要素がずれるバグ(?)とその対処法

CSS

この春のブログのデザイン更新作業中、IE7でのみ表示が崩れるという現象に出くわしました。position:absoluteで絶対配置した要素がIE6やIE8では正しく配置されるのにIE7でのみずれて表示されてしまうという症状でした*1。

よーく観察してみると親要素内の正しい位置に配置された後で親要素のサイズが変わってしまい位置がずれているようで、どうやら親要素のサイズが変わり親要素が再描画される際にpositionプロパティで絶対配置した子要素が再配置されていない模様。

更に手がかりを探すためググってみたところIE7でposition:relativeで要素を配置した場合に似たような事例*2の報告がありました。IE7にはpositionプロパティがらみで座標が再計算されないという固有のバグがあるようで、これに該当してしまったようです。

このバグ自体の回避法は分からなかったので、今回は親要素のサイズが読み込み時に変わらないように対策をしてこの問題を回避しました。読み込み後に親要素のサイズが変わっていた原因は、ブログとは別の外部サーバーにある画像認証用の画像の高さが指定されていなかったためでした。このせいで画像が読み込まれるまで仮に適当な高さのスペースを確保してレイアウトしておき画像読み込み後に高さを計算してから再描画ということが行われていたのです。この画像認証用の画像に高さを指定してやると親要素が始めから正しいサイズで描画され冒頭の問題はほぼ解消しました*3。

まあ、画像には出来るだけサイズ指定をしておきましょうという話ですね。Webデザインの基本です。読み込みが遅れる可能性がある画像は特にです。やっぱり基本はしっかり押さえておかないとダメだと今回改めて勉強になりました。

関連ページ

*1:ただし、フォントサイズや表示サイズを変更して再描画させてやると正しい位置に配置されます。

*2:http://techracho.bpsinc.jp/baba/2009_03_03/182

*3:ほぼ解消と書いたのは他にも高さを指定していない画像を使っている記事があり、ずれが生じる可能性が0ではないからです。