2006年03月21日(火) コメント:7 トラックバック:1
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました(つまり回避法を用いない場合にどんなバグが発現するか)。
- フォントサイズ関係
font-size
は%
かpx
で指定する。
- ボックスモデル関係
width
と同時に左右border
や左右padding
を指定しない。height
と同時に上下border
や上下padding
を指定しない。- (ブロックレベル要素を内包するボックスには
padding
を指定しない。) - body要素には
border
やwidth
を指定しない。
- 視覚整形モデル関係
- フロートのコンテナブロックには
width
を指定する。 - 左フロートの左
margin
は0にする。右フロートの右margin
は0にする。 - フロートに後続する通常フローでかつ
clear
していないブロックボックスにはwidth
もheight
も指定しない。 clear
するボックスの上margin
は0にする。clear
するボックスには同時にwidth
も指定する。- 絶対配置要素のコンテナブロックには
width
を指定する。 - 絶対配置要素の位置指定は
top
とleft
またはright
とbottom
で行う。left
とright
やtop
とbottom
を同時指定しない。 - 絶対配置要素のコンテナブロックはその要素の直接の親要素にする。
overflow
を使うときは同時にwidth
やheight
を指定する。
- フロートのコンテナブロックには
とりあえずこれくらいのことに気をつけていれば、そこそこ大丈夫です。その他細かいバグはケースバイケースで対処するしかないです。 「CSSハック」はこれらの条件を守れない場合の最後の手段として使ってください。 あとは仕様を正しく理解しているかどうかですね(それが一番大変だったりしますが)。
コメント(7件)
IE対応の定石、勉強になりましたm(_ _)m
参照元のサイトは「なんでうまくいかないんだああ!」と詰まったときにお世話になっていますが、2chが有益無益含めた情報のるつぼであることを実感します。
>フロートに後続するボックスの幅がフロートに合わせて短縮される
いわゆる「IE専用」ブログに、この手の表示状態をよく見かけるのですが…
正常な表示の方が一見変に見えますが、先日みりばーるさんが書かれた「floatは回り込みではない」を読めばよくわかりますね。
最近アップしたテンプレでは、記事をテーブル風にfloatさせたレイアウトを作るところで
「widthとpaddingを同時に指定できない」「floatと同じ方向にmarginを指定できない」という二つの縛りにかなり悩まされました。「FC2BLOG Designers」でやっていなかったら投げ出してたかもしれません(^^;
やっぱりCSSの知識を深めるには、いろいろなレイアウトに挑戦して経験を重ねるのが大事なんですね。
>floatと同じ方向にmarginを指定できない
実は左フロートがふたつ連続しているなら、後ろの左フロートの左marginは指定値どおりになります。
また、フロートにdisplay:inlineをつければ何故かバグが回避できるようですよ。
仕様9.7 'display','position'及び'float'の間の関係によれば、フロートのdisplayは強制的にブロックレベルになるので弊害もないと思います。
>いろいろなレイアウトに挑戦して経験を重ねる
そうですね、FC2ブログに来るまではネガティブマージンをやろうなんて思いませんでしたし。
初コメです(^^)
最近CSSを覚えはじめたのですけども、
CSSって本当に難しいですよね…
私だけかもしれませんが、
全然前に進みません(T_T)
もしよければ、たまに
ここで質問とかさせてただいても
宜しいでしょうか?
CSSわかると便利ですね。ここでいろいろ勉強させてもらいました。ありがとうございます。
ありがどうね
IE6のバグが多すぎて、
絶対配置を設定する場合、コンテナの高さは奇数であれば、底部に1PX空隙があります
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです