jquery - IE 7 中的 CSS 问题

Question

我正在尝试nth-child在 IE 7 中用作我的 css。但是，它似乎并不支持这一点。有没有办法解决它？谢谢。

我的 CSS

.table tr:nth-child(odd) {
background-color: #FFFEE8;
}

.table tr:nth-child(even) {
background-color: #FFFFFF;
}

Answer 1

最佳实践：无 JavaScript 解决方案

不要使用 JavaScript 来确定客户端的样式。这是一个不好的做法。

相反，在服务器端添加一个“ odd”或“ ”类。even

例如，如果您使用 PHP 从数组中呈现您的表格，您可以这样做：

<?php
$i = 0;
foreach ($rows as $row) {
    $odd_even_class = ($i%2 == 0) ? 'even' : 'odd';
    echo '<tr class="'.$odd_even_class.'"> ... </tr>';
    $i++;
} 
?>

然后使用 CSS 适当地设置两个类的样式，这将适用于所有浏览器：

.table tr.odd {
    background-color: #FFFEE8;
}

.table tr.even {
    background-color: #FFFFFF;
}

如果使用 JavaScript，至少避免影响所有浏览器

如果您决定使用 JavaScript 解决方案，至少要避免支持现代 CSS 的浏览器过载。

将 JavaScript 修复放入条件语句中，以防止其在 IE 以外的其他浏览器上执行：

<!--[if IE]>
<script>
    $(document).ready(function(){
        $('.table tr:even').addClass('even');
        $('.table tr:odd').addClass('odd');
    });
</script>
<![endif]-->

然后确保在 CSS 中同时涵盖 IE 和现代浏览器：

.table tr:nth-child(odd),
.table tr.odd {
    background-color: #FFFEE8;
}

.table tr:nth-child(even),
.table tr.even {
    background-color: #FFFFFF;
}

Answer 2

你可以在这里使用 jQuery

$(document).ready(function(){
    $('.table tr:nth-child(odd)').addClass('odd-row');
    $('.table tr:nth-child(even)').addClass('even-row');
});

然后

.table tr.odd-row {
background-color: #FFFEE8;
}

.table tr.even-row {
background-color: #FFFFFF;
}

Answer 3

简单的解决方案是使用 Jquery。

$(document).ready(function(){
    $('table tr:even').addClass('table-even');
    $('table tr:odd').addClass('table-odd');
});

在此处添加 CSS

.table-even{ /* your styles */ }
.table-odd{ /* your styles */ }