« IEでブロックレベル要素がセンタリングしない | MAIN | フロートボックスに合わせて親要素の高さが算出されない »

IE6で見た場合カラム落ちしてしまう。

overflowプロパティで防ぐ

floatプロパティを使ったマルチカラムレイアウトは、意図したとおりに各カラムが配列できず、一部が下に落ちてしまう「カラム落ち」の問題があります。例えばIE6では、横並びの各カラムにその横幅を超えるサイズの画像を入れると、それに合わせてカラムの横幅が広がり、カラム落ちが発生してしまいます。この場合、各カラムに「overflow:hidden;」を指定するとカラムの横幅より大きな部分は表示せず、自動的に横幅が広がることもありません。

css04.gif 【IE7やFirefoxでは画像がはみ出しても
カラム落ちはしない】
【予期せぬ大きなサイズの画像が入った場合などIE6でカラム落ちしてしまう。「overflow:hidden;」を指定してカラム落ちを予防しよう】

クライアントが更新するブログなど手違いで大きなサイズの画像が使われる可能性があるページに有効です。また、IE5.5以前およびIE6の過去互換モードではwidthプロパティの解釈にも注意が必要です。ボックスモデルの正しい解釈は、widthプロパティに指定した値がコンテント領域の横幅となり、これにpadding,borderの値を足したのもが要素の横幅となります。しかし、過去互換モードではwidthの値にpadding,borderを含み、本来より小さく横幅が計算されるため、IEに合わせてマルチカラムを組むとほかのブラウザでカラム落ちが発生してしまいます。この場合、フロートさせる各要素にはpadding,borderを一切指定せずにレイアウトを行い、その内包要素でpaddingやborderを調整するなどの工夫が必要となります。

BOX MODEL SAMPLE
First element

padding: 0;
border: none;
width: 300px;





Second element

padding: 10;
border: 2px;
width: 300px;



★標準モードにおけるボックスモデルの解釈

BOX MODEL SAMPLE
First element

padding: 0;
border: none;
width: 300px;





Second element

padding: 10;
border: 2px;
width: 300px;



★IE5.5以前およびIE6の過去互換モードではボックスモデルの解釈が大きく異なる


Field Under (DJ news), Posted by: djhiro

トラックバック

http://www.dj-hiro.co.uk/mt5/mt-tb.cgi/184

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)




Apple Store(Japan)