nth-child、last-childをie8でも使いたい
カラムを横並びにしたいときに: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]-->