IE6で起こるよく起こる6つのバグとその回避方法[CSS]

div上のfloatプロパティを使うとmarginが倍になるバグ

これは最も一般的なバグにもかかわらず、また、最も修正しやすいものの1つです。divでmarginを使用すると、その値を倍になります。

解決策は、display:inline;を加えることです。

例：

.boxA{
	float: left;
	width: 200px;
	margin: 10px 0 10px 20px;
	display: inline;
}

position :absolute;でheight:100%;は動作しないバグ

この場合、その親要素がheightプロパティを理解しません。そのため、その親要素にもheightプロパティを加える必要があります。

もし、body要素のheight:100%;を持たせたいならば、html要素にheight:100%;を加えなければなりません。

例：

html{
	height: 100%;
}

body{
	position: absolute;
	height: 100%;
}

PNGは透過できないバグ

マイクロソフトは後でこの問題を修正するためにIEに解釈されただけであるCSSパッチを実装しました。

back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="yourPNG.png", sizingMethod="crop");

これについては、いくつかのjavascriptで解決することができます。

詳しくはコチラが参考になります。

フロートされた2、3のカラムのウェブサイトで、時々1カラムがサイドにとどまる代わりに他のカラムの下で単に移動するというバグ

入力またはカラムの幅より大きい何かがあります。それは他のカラムの下で移行するでしょう。 ざっとカラム幅より大きい要素を調べてください、そして、それを修正すればこのバグは回避できます。

ulの外側の最後のアイテム・リストの倍を与えるバグ

リストの最後にコメントを加えるとこのバグは回避されます。

例：

<ul>
	<li><!-- コメント --></li>
	<li>hpgehoge</li>
	<li>hogehoge</li>
<ul>

リストがテキストと位置合わせれないバグ

これはリスト要素(<li>など..)の上にトップのパディングを持っている場合に起こります。変わりに、top marginを置くと回避できます。