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

2015-03-13

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

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

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

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

HTML

<ul class="line-boxies">
	<li>col 1</li>
	<li>col 2</li>
	<li>col 3</li>
	<li>col 4</li>
	<li>col 1</li>
	<li>col 2</li>
	<li>col 3</li>
	<li>col 4</li>
</ul>

CSS（ie8　非対応）

ul.line-boxies{
	margin:30px auto;
	width:380px;
	list-style: none;
	overflow: hidden;
}
ul.line-boxies li{
	float: left;
	margin:20px 20px 20px 0;
	padding-left:0;
	width:80px;
	height:40px;
	background:#efefef;
	box-shadow: 0 1px 1px #444;
}
ul.line-boxies li:nth-child(4n){
	margin-right:0;
}

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

カラム落ちしてます。

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

ul.line-boxies > *:first-child+*+*+*{
	margin-right:0;
}
ul.line-boxies > *:first-child+*+*+*+*+*+*+*{
	margin-right:0;
}

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

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

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

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

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

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

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->