IE6のバグ、トラブル回避策

まだまだIE6と格闘する日から抜け出せません。
IE6のバグのおかげで、コーディングが崩れるごとに、何度も同じ事を調べております。

そこで、今更ながら、
「こういう場合には、こう対策すればよい」
というのをこのページにまとめて行こうと思います。

floatした場合に横のmarginが倍になる

いわゆる「倍マージン」と言われているバグです。
例えばdiv要素などをfloatで回り込ませる場合に、同時にmargin-leftやmargin-rightを指定していると、IE6だけmargin値が倍になるというバグがあります。以下のソースだとIEだけマージン値が20ピクセルになってしまいます。

#sidemenu{
	float: right;
	margin: 0 10px 0 0;
	width: 100px;
	display: inline;
}

そういう場合には、スタイルの該当の箇所に「display: inline;」を追加するとmarginが正常に表示されます。

テキストサイドメニューの要素の高さがおかしくなる

サイトのサイドメニューをliタグで構築するのはよくある手法です。

<ul>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
</ul>

例のように、メニューはテキストで可変対応させたい場合には、CSSであえて高さ「height」を指定しないコーディングをします。通常のブラウザでは問題ないのですが、IE6では各メニューが縦に伸びきってしまい崩れる場合があります。このような場合にはaタグ、もしくはliタグに「height: 100%;」を指定してあげればバグを回避することができます。

画像サイドメニューの要素間の間隔がおかしくなる

次はサイドメニューを画像で構築する場合です。

<ul>
<li><a href="#"><img src="menu1.jpg"></a></li>
<li><a href="#"><img src="menu2.jpg"></a></li>
<li><a href="#"><img src="menu3.jpg"></a></li>
</ul>

この場合、画像間の隙間をなくすために、インライン要素であるaタグやliタグを「display: block;」としてブロック要素にするのですが、IE6だけ隙間が埋まらない場合があります。また、Firefoxでも隙間が空く場合もあるので、両者を対応しなければなりません。
Firefoxには「line-height」が、IE6には「zoom」や「font-size」が有効とされますが、これらを組み合わせます。

ul li{
	line-height: 0;
	font-size: 1px;
}
ul li a{
	display: block;
	zoom: 1;
}

ここまでくると力づくです。原因は分かりませんが、これで解決するはずです。

絶対配置で下付けしたが1px浮く

以下のようにCSSで指定して、要素を下付にしたつもりがどうしても1pxの隙間ができて、下にぴったり付かない場合があります。

#toppage{
	position: absolute;
	bottom: 0;
	right: 100px;
}

そういう場合はbottomではなく、上からのピクセル値を計算して「top: xxxpx;」というように指定してあげれば回避できるそうです。
但し、私のケースだと、上からの距離が可変だったため、topでの指定ができませんでした。そのような場合は、他に支障がなければ「bottom: -1px;」とすることもできます。
上のCSSの部分はそのままで、外領域の高さを1px増減させることで回避もできるようで、デザインやレイアウトによって適宜、対応すればよいと思います。

selectタグにcssのborderが効かない

inputタグやtextareaタグにはborderは効きますが、selectタグには効かないようです。強引ではありますが、それに合わせた枠の背景画像を用意してbackground-imageで指定するというやり方もあるようです。

thタグ内でfloatが効かない

tableタグのth内でブロック要素を回り込みさせたい場合に、floatが効かない場合があります。その場合はtd内で調整すれば、floatが効きます。

floatの際、テキストの最後尾が複製される

画面がないとうまく説明がつきませんが。
floatで回り込みをした際、回りこんだテキストの末尾2文字ほどが、ブロックの外側に表示される事があります。テキストが切れているわけではありません。複製されて表示されます。
詳しくは以下のサイトを参照してください。
2010/02/21 テキストが2文字複製される！？　IE6のコメントバグ
私は、このバグに出会うことが比較的多かったのですが、なんと原因はまじめにコメントを記述していたことにあるようです。
仕方ありませんが、毎回、最小限のコメントにとどめることで対応しています。

背景画像が1pxずれる

横幅100%の背景にセンタリングで画像を指定している場合に、画像が横方向に1pxズレることがあります。

body{
	background: url(/img/bg.gif) repeat center 0;
}

ブラウザサイズによってズレたりするようですが、細かいパターン画像などを敷く場合には1pxのズレが大きく目立つこともあるので困ります。
「ブラウザサイズによって」というのは、ブラウザのサイズを変更するとズレたりズレなかったりのようです。幅が奇数ピクセルとかになるとダメなんですかね。
対応策として、以下のようにハックでIE6のみに適用します。

*html body {
	padding-left: 1px;
}

また、body要素のみならず、幅100%の要素について同じ現象が発生する場合には、body要素に加えてその要素にも適用させます。
例えば背景画像を設置した「id=header」の画像がズレる場合、以下のように対応します。

body #header{
	background: url(/img/bg.gif) repeat center 0;
	width: 100%;
}
*html body ,
*html body #header{
	padding-left: 1px;
}

tableでセルのwidth指定が無視される

tableでセルにwidthを指定しても効かない場合があります。
これはバグというより、厳密にはIEの仕様としては正しいのかもしれませんが、モダンブラウザとは違う挙動をするので困ります。

width: 100px;	width指定なし
こちらのテーブルは	table-layoutにfixedを指定しています

width: 100px;	width指定なし
こちらのテーブルは	table-layoutなしです

実際にこのページを各ブラウザで確認してもらえれば分かりますが、「table-layout: fixed;」を指定すると、IEでもwidth指定が有効になります。