floatレイアウトでよく問題になる、floatと各ボックスに指定したmarginの実験をやってみた。まずは、左寄せ用のサンプルと右寄せ用のサンプルをごらんあれ。
サンプルは、position: absoluteを指定したul要素内のli要素でボックスを表現し、ブラウザでの挙動を調べてみた。対象としているのは、IE6, Mozilla, Opera, Safariあたりである。
新しく、癖のようなものがわかったところを書いておく。
Opera 7.2とかでは、position: absoluteを指定したul要素の幅を指定しておかないと、li要素のボックスがうまく横に並んでくれないことがある。ここでのul要素はよくあるレイアウトにおけるcontainerの役目を果たしているので、可能な範囲で横幅を指定しておこう。
Windows IE6はやはり、いろいろ足を引っ張る。特に、上記サンプルの(6)を見るかぎり、先に左にfloatしたボックスのmargin-leftや、先に右にfloatしたボックスのmargin-rightは指定してはいけないことになる。フロートの左右マージンが指定値より大きくなる（CSSバグリスト＠CSSバグ辞典スレッドより）が発症しているらしい。そこらへんを指定しないですむようにするには、ボックスの開始地点をいじるか、ボックスの中の要素でうまくmarginやpaddingを指定するかしないとならないだろう。どのようなレイアウトにしたいかによって、変える必要がある。
というわけで、ADP: floatレイアウトでつまづかないためのTipsの9.は違っていたことになる。ぎゃーん。のでいまのうちに直しておくことにする。
このほかにも、ブラウザのバグは多い。よくあるようなレイアウトにかぎって、うちでやっているようにTipsとして情報を提供することも重要だが、ブラウザでの確認作業もいつまでたってもなくならないのかもなあ、と思う。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/431
http://hail2u.net/blog/webdesign/doubled_margin_bug_at_ie.html
で対処法がありました。displey: inlineを指定すれば何とかなってしまうみたいです。
ありがとうございます。いざというときには利用価値のあるテクニックですね。個人的には、「なぜそこに書いてあるのか、ソースと結果を見ただけでは意味不明なもの」はあまり書きたくないので、使うとすれば本当にいざというときだと思います。＜以下雑談＞とはいっても、私の場合「そこに書けそうだけれど、書いてはいけないもの」とか「意味は通じるけれどなくてもよさそうに見えて、でも実は書かないとはまるもの」は許容しているので、いいかげんな判断基準に基づいてると思っていいです。
堂でもいいことではあると思いますが、このエントリってWebDesignの方が良くないですか？
ありがとうございます。カテゴリ設定しました。