Bug nth-child sur IE

by oilvier

HTML

<p>1 - Propriété CSS (nth-child(even)) avec fallback jquery pour IE :<br> les éléments pairs doivent être en jaune.</p>
<ul class="foo">
        <li>item 1
        </li>
        <li>item 2
        </li>
        <li>item 3
        </li>
        <li>item 4
        </li>
        <li>item 5
        </li>
        <li>item 6
        </li>
    </ul>
<p>2 - On n'utilise pas nth-child(even) dans le CSS mais seulement jQuery</p>
<ul class="bar">
        <li>item 1
        </li>
        <li>item 2
        </li>
        <li>item 3
        </li>
        <li>item 4
        </li>
        <li>item 5
        </li>
        <li>item 6
        </li>
    </ul>


<p class="conclusion">Sous IE le fallback ne fonctionne pas dans le cas 1.</p>

CSS

body {font-family:arial; font-size:14px; padding:10px; color:#333333;}
p {margin:0 0 5px;}
.conclusion {color:#3A87AD; background:#D9EDF7; border:1px solid #BCE8F1; padding:10px; font-weight:bold;}
ul {margin:0 0 15px;}
li {padding:5px; background:#F7F7F9; border:1px solid #E1E1E8; margin:0 0 5px;}

.foo li:nth-child(even), .foo .even {background:#FCF8E3; border-color:#FBEED5;}

.bar .even {background:#FCF8E3; border-color:#FBEED5;}

JavaScript

$('li:nth-child(even)').addClass('even')