C'est à dire: nth-child() à l'aide de pair/impair ne fonctionne pas

Mon tableau (qui fonctionne parfaitement sur Chrome, FireFox et Opera) ne s'affiche pas correctement sur Internet Explorer.

Le fond reste blanc! (Je suis en utilisant IE-8)

Code CSS:

/*My Table*/
.my_table{
border-collapse:collapse;
font:normal 14px sans-serif,tahoma,arial,verdana;
margin:5px 0;
}

.my_table th{
color:#fff;
background:#5E738A;
border:1px solid #3C5169;
text-align:center;
padding:4px 10px;
}

.my_table td{
color:#555;
border:1px solid #C1CAD4;
text-align:center;
padding:2px 5px;
}

.my_table tr:nth-child(even){
background:#E6EDF5;
}

.my_table tr:nth-child(odd){
background:#F0F5FA;
}
  • IE8 ne prend pas en charge :nth-child().
InformationsquelleAutor ajax333221 | 2011-11-18
  1. 16

    IE8 ne prend pas en charge la nth-child sélecteur j'ai peur:

    http://reference.sitepoint.com/css/pseudoclass-nthchild

    InformationsquelleAutor Clive
  2. 53

    Comme une bonne solution de contournement, jQuery a ajouté ceci à leur projet et, pour cela, à l'aide de JavaScript est acceptable:

    Pour mon CSS, j'aurais

    .my_table tr.even{
    background:#E6EDF5;
}

.my_table tr.odd{
    background:#F0F5FA;
}

    Et je voudrais utiliser jQuery pour ce faire:

    $(document).ready(function() {
    $(".my_table tr:nth-child(even)").addClass("even");
    $(".my_table tr:nth-child(odd)").addClass("odd");
});
    • c'est la vraie réponse!
    • Réponse parfaite.
    InformationsquelleAutor Abdul Munim
  3. 5

    C'est une IE8 (et les versions IE avant) problème et ce lien montre une belle correction:

    http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere

    • Oui, sans doute ne vaut que si l'utilisation de jQuery déjà 🙂
    InformationsquelleAutor Michael Durrant
  4. 2

    Vous pouvez utiliser le premier enfant et "+" pour émuler nth-child, exemple:

    tr > td:first-child + td + td + td + td + td + td + td + td {
    background-color: red;
}

    Cela, sélectionnez la 9e colonne, tout comme nth-child(9), et qui fonctionne sur IE

    • Pourquoi les downvotes? N'est-ce pas le travail?
    • Holy crap, c'est un enfer d'un sélecteur de!
    • Cela ne fonctionne que si vous savez exactement quel élément que vous ciblez. L'effet désiré est de sélectionner tous les impair, et de tous les même, tr, malgré le nombre total de tr.
    • DV: je ne peux pas obtenir ce travail. Quelqu'un peut faire un travail de violon?
    InformationsquelleAutor user1613229
  5. 1

    C'est la version de Dojo, il fonctionne très bien:

      dojo.addOnLoad(function(){
      dojo.query("table tr:nth-child(odd)").addClass("odd");
      dojo.query("table tr:nth-child(even)").addClass("even");
  });
    • Je n'ai jamais écrit dans le dojo, mais il ne semble pas juste que l'on utilise addClass tandis que l'autre utilise addStyle
    • C'était une faute de frappe dans mon affichage, la façon correcte est à l'aide de addClass. Merci pour ça. J'ai modifié la validation, maintenant, il montre la façon correcte pour les deux.
    InformationsquelleAutor Alfredo Carrillo
  6. 1

    J'ai fait il y a quelques temps, une prude javascript simple solution de ce problème:

    https://gist.github.com/yckart/5652296

    var nthChild = function (elem, num) {
    var len = elem.length;
    var ret = [];
    var i = 0;

    //:nth-child(num)
    if (!isNaN(Number(num))) {
        for (i = 0; i < len; i++) {
            if (i === num - 1) return elem[i];
        }
    }

    //:nth-child(numn+num)
    if (num.indexOf('+') > 0) {
        var parts = num.match(/\w/g);
        for (i = parts[2] - 1; i < len; i += parts[0] << 0) {
            if (elem[i]) ret.push(elem[i]);
        }
    }

    //:nth-child(odd)
    if (num === 'odd') {
        for (i = 0; i < len; i += 2) {
            ret.push(elem[i]);
        }
    }

    //:nth-child(even)
    if (num === 'even') {
        for (i = 1; i < len; i += 2) {
            ret.push(elem[i]);
        }
    }

    return ret;
};

    L'utilisation est assez simple et similaire à la css selector:

    var rows = document.querySelectorAll('li');
var num = nthChild(rows, 2);
var formula = nthChild(rows, '3n+1');
var even = nthChild(rows, 'even');
var odd = nthChild(rows, 'odd');


//Note, forEach needs to be polyfilled for oldIE
even.forEach(function (li) {
    li.className += ' even';
});

odd.forEach(function (li) {
    li.className += 'odd';
});

formula.forEach(function (li) {
    li.className += ' formula';
});

num.style.backgroundColor = 'black';

    http://jsfiddle.net/ARTsinn/s3KLz/

    InformationsquelleAutor yckart