実例でチェック！ブラウザのレイアウト崩れ

CSS2.0レイアウトで作成したサイトをFireFoxとIE7をメインにブラウザチェックをおこなっています。
FireFoxとIE7で正常に表示しているが、IE6やIE5.5でブラウザチェックをするとレイアウト崩れを発生する現象を検証しています。

私のサイトは下図のように3コラムのdivレイアウトをメインとしています。
左側div、中央div、右側divともwidthの設定はパーセントで設定しており、ウィンドウ幅を広げると それぞれのdivも広がる設定です。
ヘッダータイトル画像

● 状況
中央のdivに横長のバーナー広告を挿入したところ、IE7とFireFoxは正常に表示しているのですが IE6とIE5.5はレイアウト崩れが発生しました。
現象は右側のdivが中央のバナーより下に落ちてしまう状況です。
右側のdivは中央のバーナーに引っかかり上にいけない感じです。
ヘッダータイトル画像


● 対処の一例
バーナーをdivで囲い、divのセレクタとプロパティ値を設定しました。
----------------------
.hoge{
overflow: hidden;
}
----------------------

● 解説
IE6とIE5.5は右側のdivがパーセントを保てなくなると下にずれてしまいます。 overflow: hidden;で重なる部分を隠す設定におこなわなければなりません。 FireFoxとIE7はdivが下にずれないように、重なる部分が隠れます。

● 注意
IE6とIE5.5以外のブラウザのチェックを行なっておりませんので正常に表示するかはわかりません。 これは一例です、他にもっと良い対処方法があるかもしれません。


↑このページの先頭へ