XHTML+CSSでサイトを組むときのバグの対処法

背景が表示されないんだけど？(IE6、IE7)

とりあえず幅入れてみる

div.section {
	_height: 1%;
	min-height: 1%;
}

とかアンダースコアハックをつかってIE6より前のものだけに高さ1%を与えてます。1%じゃだめじゃーんって思うけど、IE6は高さを指定したものよりかってにのばしてしまうというバグがあるためOKなのです。何か不具合が出る場合は_width: 100%;などをつかっております。min-height: 1%;はIE7用です。

floatしてるんだけど、なんかカラム落ちしてしまうのはなんで？(IE6)

marginをつかってないか？

IE6にはfloatとmarginを指定するとmarginの値が2倍になってしまうというバグがあります。これを解決するためにdisplay: inline;をつけます。

borderとwidthを一緒に使ってないか？

IEとモダンブラウザでは幅の扱いが違うので、これがかかわっているのかもしれないぞ。

• firefox width + padding + border
• ie width の中に padding の中に border

解決策は、同じ要素にwidth、padding、borderをつけないこと。

floatさせてるんだけど、その親要素にmargin-bottomがつかないよ？

これはバグではなくて仕様らしいです。

clearfixをつかうと一発で解決です。

• clearfix
• clearfixはちゃんと考えられていた

IE5で、paddingつけてるのに背景と文字がかさなっちゃうよ？(IE5、IE5.5)

これはIE5だとインライン要素だとpaddingがきかないというバグありますのでブロック要素にしてあげたらOK。

ちなみにインライン要素だちmarginもききません。IE5.5だったらpaddingはきくけどmarginはききません。ブロック要素にすれば解決ですね。

MACIEだとfloatがされないんだけど？(MACIE)

親要素にclearつけていませんか？

MACIEだと親要素にclearをつけてると子要素がfloatしなくなるというバグがありますのでそれをとってあげればfloatしてくれると思います。

中身がブロック要素？

floatしている要素の中身がブロック要素だと、幅をつけないとfloatしてくれなかったりします。この場合は幅をつけることにより解決できます。

marginがつきぬけるんだけど？

つきぬけるところの親要素にpaddingまたはborderをつける。