IE: nth-child() che utilizza odd/even non funziona

Question

La mia tabella (che funziona perfettamente su Chrome, FireFox e Opera) non viene visualizzata correttamente su Internet Explorer.

Lo sfondo rimane bianco! (Sto usando IE8)

codice 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; 
} 

Answer 1

IE8 non supporta il selettore nth-child temo:

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

Answer 2

E 'un IE8 (e versioni di IE prima) problema e questo link mostra una bella correzione:

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

Answer 3

Come buona soluzione alternativa, jQuery ha aggiunto questo al loro progetto e il raggiungimento di questo utilizzando JavaScript è accettabile:

Per il mio CSS, avrei

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

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

E vorrei utilizzare jQuery per fare questo :

$(document).ready(function() { 
    $(".my_table tr:nth-child(even)").addClass("even"); 
    $(".my_table tr:nth-child(odd)").addClass("odd"); 
}); 

Answer 4

È possibile utilizzare first-child e "+" per emulare nth-child, ad esempio:

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

che selezionano la colonna 9, proprio come nth-child (9), e che funziona su IE

Answer 5

Questa è la versione di Dojo, funziona benissimo:

dojo.addOnLoad(function(){ 
     dojo.query("table tr:nth-child(odd)").addClass("odd"); 
     dojo.query("table tr:nth-child(even)").addClass("even"); 
    }); 

Answer 6

ho fatto qualche tempo fa , un puritano soluzione semplice javascript per questo problema:

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'utilizzo è molto semplice e simile al css-selettore:

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/