cf) ie7-js – Project Hosting on Google Code

シンプルになったclearfix

念の為スクリプトのロードも記載しておきます。
IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。
（これも内部で条件分岐して頂けると大変幸せだなぁ）

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

そしてこちらがシンプルになったclearfixのコード。

.clearfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}

余計なハックを用いず、一種類のセレクタだけでクリーンに書けます。
IE9.jsにより、旧IEでも擬似クラス「:after」が使えるようになったおかげです。
もちろん、「:before」も使えます。

その他のIE9.jsの恩恵

ボックスサイズの計算法の統一化

ボックスサイズの解釈はIE6の方がわかりやすいと思う
で触れたとおり、IE6はボックスサイズをborder-widthとpaddingを含めた値として解釈します。
が、IE9.jsを導入する事で、IE6も他のブラウザ同様の計算法に修正してくれます。
border-boxの方が計算しやすいとは言え、統一してくれるに越したことはありませんね。

first-child, last-childの実現

IE6は言わずもがな、
IE7/8はfirst-childには対応しているものの、last-childは使えません。
IE9.jsはこれら全てにfirst/last-childを提供してくれます。

HTML5の新要素にも対応してくれる

header/nav/article/section等、HTML5で追加された新要素は、
IE～8ではhtml5.js等の力を借りないとCSSを適用する事が出来ませんでした。
IE9.jsは同様の処理も行ってくれちゃいますので、html5.jsをロードする必要がありません。

ie7-squish.js

別途ie7-squish.jsをロードする事で、
ダブルマージン等のIE6のお馴染みのバグを幾つか修復してくれます。
さらに詳細は公式で。
cf) IE7.js Test Pages

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/ie7-squish.js"></script>
<![endif]-->

まとめ

IE7jsライブラリの存在は知っていたのですが、予想以上の働きをしてくれる模様。
作者に感謝すると共に、改めて世界中の技術者がIEに頭を悩ませているんだなと実感させられます。
無数の開発者が一丸となってIEという共通の課題を…胸が熱くなりますね。