web-dev-qa-db-ja.com

IE：奇数/偶数を使用したnth-child（）が機能しない

私のテーブル（Chrome、FireFox、Operaで完全に動作します）がInternet Explorerで正しく表示されません。

背景は白のままです！ （IE-8を使用しています）

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;
}
csscss3internet-explorercss-selectorscss-tables
23
ajax333221

IE8はnth-childセレクターをサポートしていません

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

16
Clive

回避策として、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");
});
53
Abdul Munim

これはIE8（およびIE以前のバージョン））の問題であり、このリンクはすてきな修正を示しています。

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

5
Michael Durrant

最初の子と「+」を使用して、n番目の子をエミュレートできます。例：

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

Nth-child（9）と同様に、9番目の列を選択し、IEで動作します

2
user1613229

私は少し前に、この問題に対する簡潔でシンプルな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-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/

1
yckart

これはDojoバージョンで、正常に機能します。

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