IE：使用奇數/偶數的nth-child（）不起作用

Question

我的表格（在Chrome，FireFox和Opera上完美運行）在Internet Explorer上無法正確顯示。

背景仍然是白色！ （我用IE8）

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不支持nth-child選擇恐怕：

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

Answer 2

這是一個IE8（和IE版本之前）的問題和這個鏈接顯示了一個不錯的修復：

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

Answer 3

作爲一個很好的解決方法是，jQuery已經添加到了他們的項目，並實現這一使用JavaScript是可以接受的：

對於我的CSS，我會

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

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

而且我會使用jQuery做這個：

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

Answer 4

您可以先用胎和 「+」 效仿第n個孩子，例如：

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

那選擇第9列，就像第n個孩子（9），並且在IE

Answer 5

這道場版本，它工作得很好：

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

Answer 6

我做了前一段時間，對於這個拘謹簡單的JavaScript解決方案問題：

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

用法很簡單，類似CSS選擇器：

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/