「IEのHTML・CSSをモダンブラウザ並にする」IE7.js・IE8.jsを使ってみた
先日オンラインブラウザチェッカーは使えるか？で、ブラウザの規格の統一なんていう日は来るのか、と書いたのですが、なんか、すごいものが…。
IE7.jsはMicrosoft Internet ExplorerをWeb標準を準拠しているブラウザのように動作させることができるjavascriptライブラリです。このjsはIE上の多くのHTMLとCSSの問題点を解消するとともに、透過PNGをIE5以降で正しく表示させることができます。現在はベータ版です。
これがちゃんと動作したら、まるで天国のような世界になりそうです。使用するには、以下のコードを<head>の中に記述するだけという手軽さ。
以下Google Codeから引用。
IE7.js
IE7.jsはIE5~6の動作をIE7に適応させるものです。<!–[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]–>IE8.js
IE5~7をIE7にない高度なCSS特性に対応するようアップグレードします。<!–[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]–>※IE7.jsとIE8.jsを同時に使うことはできません。
PNG
このスクリプトは「*-trans.png」というファイルネームのイメージだけを修正します。ダウンロード
ファイルに直接リンクを貼っても良いし、ダウンロードしてつかうこともできます。 ダウンロード （訳注：2.0(beta)をクリック）デモページ
IE7 Test Page
上のデモページを見ると、かなりの修正ができるらしい（デモページで使われているのはIE8.jsですので、IE8.jsはIE7.jsの機能込みということみたいです）。それぞれサンプルがあるんですが、自分でやってみるのもいいかなと思って気になる項目だけ実験してみました。
■チェックした項目
- 透過PNG
- マージン :auto
- 疑似クラス :hover
- アトリビュート [attr]
- フォントサイズ
IE5.xで絶対サイズ指定(x-smallとか）のフォントの初期値が違うのを修正。 - 要素の高さ、幅のmin, max指定
- max-height
- min-height
- max-width
- min-width
- min-height + max-width
■チェックに使ったページ
IE7.js
IE8.js
どちらも適応していないもの
■環境
スタンドアローン形式のIE5.01+XP、IE5.5+XP
通常版 IE7+XP、IE6+2000
■結果
以下の点以外は全て期待通りに動作しました。
- 透過PNG
上にも書きましたが「*-trans.png」にリネームしないと効果なしです。もちろん*部分はなんでもOK。背景でもimg要素でも透過になります。ただし、背景にPNGを使った場合、タイル状にリピートさせたりbackground-positionを使ったりはできませんでした（デモページにその旨記述あり）。 - max-height
max-heightを指定しても、なぜか高さが文字量に合わせて伸びてしまいました。ただ、デモページは問題なく動作しているので、何か他に原因があるのかもしれません。overflow:visibleやwidthを指定する、marginやpaddingの値を指定しないなど、いろいろやってみたのですが、原因不明です。
上記のような問題はほかにもまだあるかもしれませんが、:hoverひとつだけでも感動しました。IE5.0の文字サイズの調整も個人的にはとても嬉しい機能です。
ただ、やはりまだベータ版と言うことで「自分の環境では動かない」「バグ発見」「position:fixedの挙動がおかしい」等々の報告もあるようなので、実際に使用するのには注意が必要かもしれませんし、修正できる要素も限られているので、これだけでIEがFirefoxになるかと言えば、残念ながらそうではないようです。また、javascriptが動作していない環境では使えないということも頭にいれておいたほうがよさそうです。
使用に際しては、困ったらディスカッショングループがあるので、こちらを見ると問題解決することがあるかもです。
ie7-js Google Groups
いずれにせよ、正式なバージョンが発表されるのが待ち遠しいですね。
[追記]
IE7.jsに関して少し追加しました。IE7.jsを使ってもIEはFirefoxにはならない
Loading ...
2008年8月23日 17:36:14
[…] 440design より：「IEのHTML・CSSをモダンブラウザ並にする」IE7.js・IE8.jsを使ってみた […]
2009年2月15日 8:04:32
[…] 440design […]