[ IE7.js ] – IE5, IE6 で first-child とか色々使える JavaScript ライブラリ

Microsoft Internet Explorer 6 以下の HTML / CSS 表示を調整する IE7.js と言うライブラリがあったので試してみました。

IE7.js の設置方法

head 内で、下の様に書いておくと Google のサーバから直接読み込んで使えます。

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

もちろん、ダウンロードしても使えますけど…。

IE7.js の使い方

W3C 標準仕様の CSS を書いて、IE7.js の対応している部分なら表示を調整してくれます。対応している箇所は IE7 Test Page を参照。

IE7.js + Internet Explorer 6 + first-child のテスト

試しに Internet Explorer 6 が対応していない :first-child と言う擬似クラスを試してみた。

IE7.js を使っていないサンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>first-child のテスト</title>
<style type="text/css">
<!--
ul > li:first-child { color:red }
-->
</style>
</head>
<body>
<p>:first-child に対応しているブラウザなら一行目が赤で表示される。</p>
<ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li>
</ul>
</body>
</html>

IE7.js を使ったサンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>first-child のテスト ( IE7.js を利用 )</title>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css">
<!--
ul > li:first-child { color:red }
-->
</style>
</head>
<body>
<p>:first-child に対応しているブラウザなら一行目が赤で表示される。</p>
<ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li>
</ul>
</body>
</html>

とりあえず、Internet Explorer 6 + first-child は正常に表示できました。