IE9様にお許しを頂けなかったCSS設定

XPのサポート終了で、堂々と「IE8は対象外です!(キリッ)」と放棄でき、CSS設定も楽に……
そう思ったら大間違いです。
さすが天下のマイクロソフト、層が厚いです。伏兵がいました。
IE9という伏兵が……。

CSSに比較的寛容なのですが、色々と癖があるIE9。
今回は、メールフォームの設定をするという仮定で
私が愕然とさせられたCSS設定をご紹介します。

たとえばこんなメールフォームを作るとします。
項目名は「お名前」「ご住所」「お電話番号」「質問内容」「詳細内容」
それらをこちらで変換しました。

跳躍するメールフォーム

タグは下記の通りです。

跳躍させたいタグ

.box { text-align:left; }
h1, p, dl { width:940px; margin: 10px auto; }

結果
この左寄りめ!

box に width と margin を設定して、h1 と p と dl要素に text-align:left で解決しました。

.box { width:920px; padding:10px; }

結果
Nもこんなスマートになれたら…

外枠から左右の空白を引いて width の値にした結果です。
box-sizing で解決しました。
box-sizing: content-box で padding(もしくはborder)を引いた値
box-sizing: border-box で padding(もしくはborder)を含めた値

dt { width:300px; float:left; }
dd { width:620px; float:right; }

結果
heightのズレは心のズレです

こちらのサイト様を参考にしました。

dl、dt、dd と CSS で表組み(テーブル)を作る(EIJI様)

dt に clear:left を追加
dd の width と float を削除し、代わりに margin-left で dt の width値を追加
盲点でした。

HTML5の発表が近づいているらしいので、それに合わせてIEと他ブラウザの溝も埋まる……といいな。

【ハートブレーン】http://heartbrain.net

メールでのお問合せ・お見積りはコチラ