＜危険＞この記事は2010年12月4日に書かれたもので内容が古いです。
先日、久しぶりにIE6のコーディングでつまずて困ったので、今更ながら自分用にまとめです。
自分用なので、見にくい・分かりにくいかもしれませんが…こういうの、思い出したときに書かないとわすれちゃうんだよね。
テキストの数文字がダブる
ソースに存在しない文字がダブって表示される現象。
対策
ソースコードから直近のコメント（<!– –>）を消すor移動する。
よくわからないけど、コメントタグが悪さをするらしい。
※この状況のサンプル画像をわざと作るのがなかなか難しい…。
リストの下部に謎の余白ができる
リスト（<li>）に画像や背景色を指定すると、ブロックの下に謎の余白が生まれる。
対策
- ソースコードの改行をなくす。
ex）
<ul>
<li>わんたん</li>
<li>わんたん</li>
<li>わんたん</li>
</ul>
↓こうする
<ul>
<li>わんたん</li><li>わんたん</li><li>わんたん</li>
</ul> - line-heightの値を1なり0にする。
- <lI>をインライン要素にして改行
Widthの指定された要素にmargin、paddingをいれるとwidthの指定内で処理される
他のブラウザと違って、ひとつの要素にwidthを指定した時の挙動が違う…。ので、自分はちょっとスマートじゃないですが、各要素を<div id="MainClm"><div id="MainClmInner">うにゃにゃ</div></div>と入れ子にして、外側（MainClm）にwidthを指定して、中側（MainClmInner）にpaddingなりmarginを指定してIE6だろうがそうでなかろうが問題ないようにしてしまう。
段々畑が出来上がる
flortしたブロックがどんどん、段々畑の様にずれていく現象。
対策
中のブロック要素にwidthを設定する
PNG画像を使う
透過しないIE6で透過PNGを使う！
DD_belatedPNG
CSSのハック技
IE6だけにCSSをかけたい時は、これのどちらかを使ってる。
- <!–[if lte IE 6]> <![endif]–>で、IE6しか読み込まないCSSファイルを作る。
- CSSの要素名の頭に“_”を付ける。
ex）例えば、margin:10px → _margin:15px とするとか
margin:0 autoでセンター揃えにならない
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">だと、IE6はセンター揃えになりません。なので
素直にDOCTYPEを（<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">）に変える。
IEで全ての要素に:hover擬似クラスセレクタを適応させる
CSSだけでプルダウンメニュー作るときに便利。
csshover.htc
角丸やドロップシャドウなどCSS3の要素を適用
適応する要素にposition:relative;を忘れないように！