IE 7 の拡大時に余白ができたり、縮小時に食い込んでしまうバグの対策

IE 7 のズーム機能を使用すると、position プロパティを指定している箇所の表示がおかしくなってしまうことがあります。IE 7 でズーム機能を使用すると崩れてしまうdemoを用意しました。

通常時 (サンプル画像は 100% 時)には意図したとおりにレンダリングされています。

拡大時 (サンプル画像は 120% 時) は下部に意図しない余白ができてしまっています。

縮小時 (サンプル画像は80%時) には黒い枠がグレーの枠の要素に食い込んでしまっています。

この例のHTMLの構造は

黒い枠のついたdiv要素
- 薄グレーの背景のdiv要素(position:relative;)
  - 濃いグレーの背景のdiv要素(position:absolute;)

という入れ子の構造になっています。

この不具合の原因はおそらくpositionプロパティが適用された要素の入れ子構造が一定の場合に起こるものと思われます。

解決方法として、不具合再現用のdemoの例では

黒い枠のついたdiv要素(IE 7 対策のため、position:relative;を指定する)
- 薄グレーの背景のdiv要素(position:relative;)
  - 濃いグレーの背景のdiv要素(position:absolute;)

のように不具合が起こる要素の親要素にpotision:relativeを指定するとする方法があります。

http://www.yomotsu.net/lab/css/ie7zoombugfix/trackback

この記事へのコメントはまだありません

このページの目次