IE: nth-child() sử dụng lẻ/thậm chí không hoạt động

Question

Bảng của tôi (hoạt động hoàn hảo trên Chrome, FireFox và Opera) không hiển thị chính xác trên Internet Explorer.

Nền vẫn còn màu trắng! (Tôi đang sử dụng IE8)

mã 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 không hỗ trợ nth-child selector Tôi sợ:

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

Answer 2

Đây là một IE8 (và các phiên bản IE trước đây) và liên kết này cho thấy một sửa chữa tốt đẹp:

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

Answer 3

Là một workaround tốt, jQuery đã bổ sung này để dự án của họ và đạt được điều này sử dụng JavaScript có thể chấp nhận:

Đối với CSS của tôi, tôi sẽ phải

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

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

Và tôi sẽ sử dụng jQuery để làm điều này :

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

Answer 4

Bạn có thể sử dụng first-child và "+" để thi đua thứ n-trẻ em, ví dụ:

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

Đó chọn cột 9, giống như thứ n-con (9), và hoạt động trên IE

Answer 5

Đây là phiên bản Dojo, nó hoạt động tốt:

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

Answer 6

tôi thực hiện một số thời gian trước đây , một người đàn bà làm bộ giải pháp javascript đơn giản cho điều này vấn đề:

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

Việc sử dụng khá đơn giản và giống với 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/