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

  • このエントリーをはてなブックマークに追加

自分がサイトを作るときにMACなどで作業をしていると、Windowsでみたときにけっこう崩れるってことがあるんですけど、自分はこうやって対処しているよーっていうのを書いておこうと思います!


背景が表示されないんだけど?(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をつかうと一発で解決です。

このページの先頭へ戻る

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をつける。

これはxhtmlで書いた場合でxml宣言をつけてある場合のはなしですのでIE6は互換モードの場合の話です!

「もっといい解決法があるよー」とか、「これちげーよ」とか、「この場合はどうしてるのさ?」などあったらいってください!

このページの先頭へ戻る

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/12

このページの先頭へ戻る