2008.08.09.

「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応

「IE7.js」、「IE8.js」は、IE6 で対応していなかった透過 PNG、疑似クラス :hover、マージン:auto、min-、max-などなどが表示できるようになるという javascript です。
googleコードから直接読み込めるので、「Google Code」のページにある「IE7.js」または「IE8.js」のコードをコピーして<head>内に埋め込むだけ。簡単です。
「IE7.js」は、IE5と6用。「IE8.js」は、IE5から7まで。標準的な XHTM/CSSの 解釈をしてくれるようになるはず。なるはず、というのはまだベータ版だから。
私のサイトでは、ページに少しだけ影を付けていたり、メニュー部分で :hover や min-width を使っていますが、IE6 表示用にそれぞれの要素に対して個別に対応しなければなりませんでした。これらが「IE7.js」を使うだけでまとめて解決できれば、ずいぶん楽ちん。さっそく入れてみたのでした。

「IE7.js」を使った結果。
:hover はうまく動作しています。IE6 でもドロップダウンメニューが動くようになりました。min-width はうまく働きませんでした。透過 PNG 自体はちゃんと表示されますが、リピート表示が出来ない仕様になっていました。影表示の透過 PNG は、縦方向にリピートさせているので意図した形にはなりませんでした。とりあえず、メニュー部分が崩れてしまうと大変読みにくくなるので :hover だけでもありがたいです。
「IE8.js」のほうは、疑似要素の:after、:before にも対応しています。でもその要素をマイナスのマージンを指定して親要素の枠に重ねたり外に出したりの移動が出来なくて、思った形には使えませんでした。この辺は細かいデザインの話なので、今まで通り出来なければ出来ないなりに個別に対応するしかないですね。

とりあえず最小限の対応ということで「IE7.js」を使うことにしました。