IEでも透過pngやmin_heightとかモダンブラウザみたいにやってみよう

個人的にはIEが大嫌い。でも一応WEBディレクターとかやっているので、IEの対応は必須。
最新のIE8ですら、いま盛り上がっているCSS3はほとんど対応していない（MSは何を考えているのか理解できん）。
当然、IE用のCSSハックを書かなくてはならんのですが、これが面倒でして。せめて透過Pngとかmin_heightとか、擬似クラス:hoverくらい対応して欲しいモンです。
そこで、Googleさんの「IE7.js」・「IE8.js」を使って、何とかしよう!っていうお話です。

試しに、透過pngを表示してみましたがOK。IE6で見てみると一瞬、pngが透過できていない状態（例のアレね）になるが、javascriptを呼んだら透過されました。
ただ、リピートはできません。この辺はまだベータ版ということで、目を瞑りましょう。

<!--[if lt IE 7]>
<mce:script mce_src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE7.js"></mce:script> <![endif]--> 

※透過pngを使う場合、img名をリネームする必要があります。
リネーム前「img/hoge.png」
リネーム後「img/hoge-trans.png」と言う具合に、-transを付けます。これだけ。

擬似クラス :hoverも問題なし。当たり前のように動きます。ドロップダウンメニューもOK。

「IE8.js」は「IE7.ｊｓ」の拡張版っぽい。擬似クラス:after、:beforeも使えます。

 <!--[if lt IE 8]> <mce:script mce_src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></mce:script>
<![endif]-->

まったくモダンブラウザのようにはいきませんが、かなり使えます。個別にIEハック書いているコーダーさん、これはオススメです。
あっ・・・javascriptをオフにしてたらダメだね（WEBデザイナーがそこまで考えなきゃならんか?）。やっぱダメだわ、IE。

Share/Bookmark

One Response so far.