2010/03/25まだまだIE6と格闘する日から抜け出せません。IE6のバグのおかげで、コーディングが崩れるごとに、何度も同じ事を調べております。「こういう場合には、こう対策すればよい」というのをこのページにまとめて行こうと思います。floatした場合に横のmarginが倍になるいわゆる「倍マージン」と言われているバグです。div要素などをfloatで回り込ませる場合に、同時にmargin-leftやmargin-rightを指定していると、IE6だけmargin値が倍になるというバグがあります。以下のソースだとIEだけマージン値が20ピクセルになってしまいます。inline;」を追加するとmarginが正常に表示されます。テキストサイドメニューの要素の高さがおかしくなるサイトのサイドメニューをliタグで構築するのはよくある手法です。href="#">メニュー3</a></li></ul>例のように、メニューはテキストで可変対応させたい場合には、CSSであえて高さ「height」を指定しないコーディングをします。通常のブラウザでは問題ないのですが、IE6では各メニューが縦に伸びきってしまい崩れる場合があります。100%;」を指定してあげればバグを回避することができます。画像サイドメニューの要素間の間隔がおかしくなる次はサイドメニューを画像で構築する場合です。block;」としてブロック要素にするのですが、IE6だけ隙間が埋まらない場合があります。Firefoxでも隙間が空く場合もあるので、両者を対応しなければなりません。Firefoxには「line-height」が、IE6には「zoom」や「font-size」が有効とされますが、これらを組み合わせます。1;}ここまでくると力づくです。原因は分かりませんが、これで解決するはずです。絶対配置で下付けしたが1px浮く以下のようにCSSで指定して、要素を下付にしたつもりがどうしても1pxの隙間ができて、下にぴったり付かない場合があります。xxxpx;」というように指定してあげれば回避できるそうです。私のケースだと、上からの距離が可変だったため、topでの指定ができませんでした。-1px;」とすることもできます。上のCSSの部分はそのままで、外領域の高さを1px増減させることで回避もできるようで、デザインやレイアウトによって適宜、対応すればよいと思います。selectタグにcssのborderが効かないinputタグやtextareaタグにはborderは効きますが、selectタグには効かないようです。強引ではありますが、それに合わせた枠の背景画像を用意してbackground-imageで指定するというやり方もあるようです。thタグ内でfloatが効かないtableタグのth内でブロック要素を回り込みさせたい場合に、floatが効かない場合があります。その場合はtd内で調整すれば、floatが効きます。floatの際、テキストの最後尾が複製される画面がないとうまく説明がつきませんが。floatで回り込みをした際、回りこんだテキストの末尾2文字ほどが、ブロックの外側に表示される事があります。テキストが切れているわけではありません。複製されて表示されます。詳しくは以下のサイトを参照してください。IE6のコメントバグ私は、このバグに出会うことが比較的多かったのですが、なんと原因はまじめにコメントを記述していたことにあるようです。仕方ありませんが、毎回、最小限のコメントにとどめることで対応しています。背景画像が1pxずれる横幅100%の背景にセンタリングで画像を指定している場合に、画像が横方向に1pxズレることがあります。0;}ブラウザサイズによってズレたりするようですが、細かいパターン画像などを敷く場合には1pxのズレが大きく目立つこともあるので困ります。「ブラウザサイズによって」というのは、ブラウザのサイズを変更するとズレたりズレなかったりのようです。幅が奇数ピクセルとかになるとダメなんですかね。対応策として、以下のようにハックでIE6のみに適用します。1px;}また、body要素のみならず、幅100%の要素について同じ現象が発生する場合には、body要素に加えてその要素にも適用させます。背景画像を設置した「id=header」の画像がズレる場合、以下のように対応します。1px;}tableでセルのwidth指定が無視されるtableでセルにwidthを指定しても効かない場合があります。これはバグというより、厳密にはIEの仕様としては正しいのかもしれませんが、モダンブラウザとは違う挙動をするので困ります。fixed;」を指定すると、IEでもwidth指定が有効になります。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。