2004/06/21

Win IE 5とCSSのtips

リンクいただく各BlogでもWeb系の話題が続いておりますので、私ももう一つ道草を。

丁度、本サイトでも、お問い合わせいただいておりましたので、ご存知の方は流していただきたいのですが、CSSを作製する上での、ブロック要素の【margin、border、padding】の設定で、Win IE5.xと同IE6&他のブラウザとで同様の表示を確保するCSS記述方法で、私の採用している方法をご紹介します。

(お断わり:以下のtipsは、HTML4.0の標準モードの場合です)

CSSで画像以外でfloat設定しているブロック要素には、幅サイズ(=width)の指定が不可欠ですが、Win IE5とWin IE6を含めたその他のブラウザとでは、そのコンテンツの計算基準が違います。

現在の各最新版ブラウザの標準モードのレンダリングでは、上記ケースでコンテンツの幅を設定する際は、先の【margin、border、padding】をすべて引いた後の幅数値(pxやem、%など)が、指定する「コンテンツ幅=
width」になるのですが、IE5のみ、「コンテンツ幅+padding+border」までが、指定する「コンテンツ幅」となります。

仮に、
・あるブロックの全体の幅を400px、
・marginの左右をそれぞれ10px、
・borderラインを左右に2pxで引き、
・borderからの内側余白(=padding)を左右8px
という設定で、CSSを製作するとしますと、通常は、
width: 360px; (※)
margin: 10px;
border: 2px;
padding:8px;
(記述は端折って、M/B/Pとも上下左右にも同じpx設定です)
となりますが、IE5の場合では、
width: 380px; (※)
margin: 10px;
border: 2px;
padding:8px;
としないと、同様の表示が確保できません。

対応策としては、それぞれに対応する2枚のCSSを作製して、javascriptでブラウザ(UserAgent)毎に、読み込むcssを振り分けるという方法が企業サイトには多く見られますが、最近ではjavascriptを切る設定でブラウジングされている方もいらっしゃいますし、私の様に小規模なWeb店舗では、製作時間に限りがありますので、出来れば1枚のスタイルシートで、両方に対応したいところです。

現在、私が採用している方法では、問題の【width】の記述を、以下のようにすることによって回避し、表示用のCSSは何とか1枚のシートで対応しております。

margin: 10px;
border: 2px;
padding:8px;
width: 380px;      ←IE5の設定幅
voice-family: "¥"}¥"";
voice-family: inherit;
width: 360px;      ←その他の設定幅

floatは、コンテンツ内のテーブルや、他の要素のオーバーフロー処理など、ブラウザ毎の対策が非常に難しい世界で、今でも「なんでお前は言うことを聞いてくれないんだぁ」と半べそかきながら、書いてはブラウザ・チェックを掛け、私の弱い頭を掻きむしりながら四苦八苦の毎日です。
テーブルレイアウト時代は、楽でした…