IE6のwidth解釈のバグ対策

油断すると２カラムとか３カラムが他のブラウザでは崩れてます・・・。

※この記事は2005年にこのサイトを制作した当時の記事ですので、現在の状況とかなり異なっている場合があります。記事自体は残しておきますが、IE6を使っている人はもういないですね。。。

スタイルシートレイアウトで表示が崩れないようにする

せっかくテーブルレイアウトから、スタイルシートレイアウトへ移行しても、 ＩＥ以外のブラウザ（MozillaやOperaやNetscape）で２カラム（２段組）や３カラム（３段組）が崩れていると ちょっと凹むと思います。

（・・・でも、使ってる人多くないし・・・ゴニョゴニョ）

・・・・・・・・気を取り直して進みます。

解決策はたったコレだけです。

「width」と「padding・border」を一緒に指定しない

つまり、レイアウトは、ざっくりとエリアの幅だけ決めて、 細かい調整はその中の「p」とかの要素でやれば大丈夫です。

スタイルシートレイアウトで表示が崩れる原因

問題は解決しちゃいましたが、一応、そうなる原因を解説します。

原因は、ＩＥ（の互換モード）が、「width」を「padding・border」を加えた大きさとして判断するからです。 本当は、「width」は内容領域の幅を意味するので、「padding・border」を加える前の幅なのです。

例えば、ＩＥでは、100pxのwidthを設定した時に、paddingを10px、borderを10pxと設定していたとすると、これらが含まれ、 このとき内容領域80pxになっています。

しかし、他のブラウザでは100pxのwidthを設定したということは、「paddingもborderも含まれない内容領域の幅が100px」という事を意味します。 つまり、paddingとborderの分の20pxだけ、ＩＥに比べて横幅が拡大されます。そして、スタイルシートレイアウトの段組みにその分の余裕がなければ はじき出され、レイアウトが崩れる原因になってしまうのです。

以上から、レイアウトでは、paddingもborderも指定しなければ（つまり、paddingもborderもゼロなら）、解釈の違いによる問題は起こらないので、そうするのがオススメです。