IE6~8でCSS3セレクタに対応

IE6~8ではCSS3セレクタにほとんど対応していません。
そこでIE6~8でCSS3に対応させるjsライブラリをご紹介。

jQueryやPrototype.jsなどのライブラリと一緒に使用します。

jQueryを使用する場合

<script type="text/javascript" src="jquery.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

使用するライブラリによって使えるセレクタの種類が変わってくるので、その点は注意が必要です。
試しにサンプルデータを作成してみました。

CSS3セレクタの:nth-child(n)を使用し、tableの奇数列の場合に背景色が付くよう指定しました。
CSSは以下のように記述しました。

.sample {
width:300px;
}

.sample th {
width:80px;
border:solid 1px #CCC;
padding:5px;
}

.sample td {
width:200px;
border:solid 1px #CCC;
padding:5px;
}

.sample tr:nth-child(odd) {
background-color:#EEE;
}

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る