以前ブラウザについて書きましたが、Webサイトを作る場合、制作者は基本的に全てのブラウザで同じ表記で見えるように作らなければなりません。
そんな場合に厄介なのが、IE6の存在です。
以前記事を書いた時点ではブラウザのシェア全体の15%程がIE6ユーザーなので、まだまだ切り捨てるわけには行きません。
慣れると特に気にせず対応できるIE6ですが、特に駆け出しの方なんかは非常に苦労すると思います。
そんなIE6の対応策をいくつか書いてみようと思います。

後方互換モードを回避する

xhtmlで記述した場合には、W3Cの仕様ではhtml文書の1行目にxml宣言を記述することが必須となっています。
【xml宣言】 <?xml version=”1.0″ encoding=”UTF-8″?>

しかし、IE6はDTD宣言を1行目に書かないと「後方互換モード」という、cssが一般的に認知されるようになる以前の挙動を取るモードになってしまいます。
標準モードのIE6ですら問題児なのに、後方互換モードのIE6はそれ以上に厄介で、細かく挙げればきりが無いですが、widthの数値にborderやpaddingが含まれてしまったり、marginのautoが有効になってくれなかったりと非常にコーダー泣かせです。
これに対応する為には無駄なdivが増えたり、cssハックが必要になったりしてしまいます。

となると、解決法はひとつ。
xml宣言を省略して、DTD宣言を1行目に持ってきましょう。
W3Cではxml宣言を記述することを強く推奨していますが、文字コードがUTF-8もしくはUTF-16で書かれている場合には省略が可能であるとしています。
私は普段UTF-8で書いているので、いつも省略しています。
実際その方が余計なdivは増えず、作業時間も短くて済むのでお客様にも無駄なコストをかけてしまうる事はありません。
htmlチェックサイトなどでは減点されてしまいますが、チェックサイトの為に作っているわけではないですよね。

ちなみにUTF-8やUTF-16以外で書いている文書でxml宣言を省略したとしても、ページ表示に問題が起きたりすることはありません。
単に「規格に反している文書」というだけですね。
趣味のサイトなどで、そんなの気にしないという人はどんどん省略していいと思います。

marginバグに対応

恐らく多くの人が出会うであろう、IE6のバグのひとつに「floatを入れた方向のmarginが倍になる」というものがあります。
例えば

#hoge{
float:left;
margin-left:10px;
}
と書いたとすると、IE6では何故か左マージンが20pxになってしまいます。
これが原因でカラム落ちをしてしまった、なんて経験のある方は多いんじゃないでしょうか。

これに関してはmarginを適切にする解決方法はありませんので、marginの代わりにpaddingを使うか、左側のボックスや親ボックスのmargin・paddingを使うかで解決します。
背景やボーダーが無いボックスならpaddingで代用して問題ないですね。

透過pngを使う

自由なデザイン・レイアウトのサイトを作る時に透過pngは非常に便利ですね。
しかし、ここでも問題が。IE6ではそのままだと透過pngは使えず、透過部分が水色で表示されます。
透過pngをIE6に適用させるにはいくつか方法がありますが、表示が非常に重かったり背景のrepeat指定がきかなかったりと使い勝手が微妙なものばかりです。
その中でも私が普段使っているのは「DD_belatedPNG.js」というjavascriptです。

配布元からダウンロードしたものをjsフォルダに入れ、head内にこのように書き込みます。

<!–[if IE 6]>
<script src=”js/DD_belatedPNG.js”></script>
<script>
DD_belatedPNG.fix(‘img, .png’);
</script>
<![endif]–>

そして透過pngを使用したimgタグや、背景で使っているタグにclass=”png”を指定すると、IE6でも透過pngがきちんと表示されます。

しかし、DD_belatedPNG.jsも完璧ではないんですよね、少々弱点があります。
まず、まれに表示位置がずれたりpngが透過されなかったりする場合があります。
そういう場合はリロードすると直るのですが、見る人全員がF5を押してくれるわけではないので結構嫌な問題です。
それと、透過pngを使用した画像はjavascriptでのロールオーバーが適用されません。
どうしてもロールオーバーをしたければcssで背景として使用するしかありません。

透過pngを使ったボックスのpositionの値にstatic以外を指定するとずれることがありますが、この場合はページ全体を囲んだdivにrelativeを入れると直ります。

長くなりましたので今日はこの辺にしときます。
皆さんもIE6と良き友達になれますように。