nth-child、last-childをie8でも使いたい

カラムを横並びにしたいときに:nth-childは便利です。

でもIE8以下は対応してません。

※ :first-child は、ie7から対応してます。

どうしてもie8でもnth-child擬似クラスを使いたいときのハック。

HTML

CSS(ie8 非対応)

この状態でie8で確認すると…

ie8_pre

カラム落ちしてます。

ie8に対応させるためには、以下のスタイルシートを付記。

4番めと8番目を「+*」で指定してます。

ie8_after

でも、これだと、カラム数が決まっている場合はいいのですが、もっとカラムが多くなったり、いくつになるかわからない場合は、現実的じゃないですね。

やはりjavascript での対応になるでしょうか

IE8以下でもCSS3に対応する「selectivizr」
http://selectivizr.com/

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

Selevtivizrは、jQurey,mootoolsなどのライブラリが必須です。

また、スタイルシートは外部ファイルとして読み込む必要があるとのこと。

 

SNSでもご購読できます。