IE6 対策

イベントリスナーについてちょっとだけ考える のところで IE でのイベントについて少し書きましたが、今回は IE6 だけに絞った Tips を３つ紹介します。なんて需要のなさそうな記事なんだｗｗ

まずは 三角形を描く で紹介し、「疾走者たちへ」で活用した DIV による三角形描画ですが、これが IE6 ではそのままできません。

↑この青で描かれた 3 つの border を transparent にすることで緑の三角形だけを残すわけですが、 IE6 では transparent 指定が効きません。

そこで、IE6 のみ特殊処理します。具体的には IE 独自の filter 属性を使って青を透明色として定義してやります。 GIF 画像の透明色指定みたいな感じですね。
透明色指定するコードはこうです。

nodeDiv.style.filter = 'chroma(color=blue)';

言うまでもないですが、ここで nodeDiv とは ある DIV に対して document.getElementById した結果です。


次も同じく DIV の話ですが、DIV の height を小さく設定しても IE6 ではある大きさ以下にはなりません。 IE6 では font-size 以下の高さにはならないためです。
ですので高さを例えば 10px にしたいのであれば、font-size を 10px 以下に設定する必要があります。

「疾走者たちへ」の画面左下のマップに表示されているドット１つ１つは DIV なのですが、

IE6 だとこれがドットにならず縦長の線になってしまいます。なのでこれら DIV について font-size:0px; を設定しています。
(2011/12/18追記： overflow:hidden; も必要でした。これがないと高さは 2px より小さくなりません。)



最後に FlashCanvas で <canvas> 要素を使用する場合です。
ちゃんと調べてないですが、 IE6 では getContext でコンテキストを取得する前に

nodeCanvas = G_vmlCanvasManager.initElement( nodeCanvas );

のコードが必要です。ここで変数 nodeCanvas は <canvas> 要素に対して document.getElementById した結果だと思ってください。

この G_vmlCanvasManager.initElement というのは Google 提供の excanvas.js を使用して IE での canvas 描画を VML を使って描画する際に必要な初期化なんですが、なぜ FlashCanvas でしかも IE6 のときだけこの呼び出しが必要なのかは謎です。

実際に使用する際に IE6 についての場合分けが面倒であれば try ～ catch で挟んでしまえばいいですね。

try {
    nodeCanvas = G_vmlCanvasManager.initElement( nodeCanvas );
}
catch(e) {
}

(2010/12/03追記： IE6 だけでなく IE 全般でこのコードが必要なようです。ただし常に必要なわけでなく、 <canvas> 要素を createElement で動的に生成した場合のみで、 HTML に最初から　<canvas> の記述があれば不要でした。　なぜそうなのかは分かってません。)

(2010/12/11追記： G_vmlCanvasManager.initElement ではなく FlashCanvas.initElement を呼ぶ必要があるとのこと。 G_vmlCanvasManager.initElement 呼び出しも中では FlashCanvas.initElement を呼び出しているものと思われます。
結論として <canvas> 要素を createElement で動的に生成した場合にはそれを appendChild した後に以下コードを書いておくことになります。

if( typeof FlashCanvas != "undefined" ) {
    FlashCanvas.initElement( nodeCanvas );
}

必ず appendChild した後でなければなりませんので注意。)