【问题标题】：CSS issue in IE 7 [duplicate]IE 7中的CSS问题[重复]
【发布时间】：2013-08-25 22:09:30
【问题描述】：

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

我的 CSS

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

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

【问题讨论】：

stackoverflow.com/questions/7471190/…
唯一的解决方案是使用基于 JavaScript 的解决方案...odd 和 even 类将被添加到这些元素中
@ArunPJohny 没有 JavaScript 不是唯一的解决方案。可以在服务器端添加这些类以获得最佳性能，请参阅我的答案。

标签： jquery html css internet-explorer

【解决方案1】：

你可以在这里使用 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;
}

【讨论】：

您最好使用原生 CSS 选择器，例如 :nth-child(even)。在支持:nth-child 的浏览器中，这将比:even 更快（参见第一个additional note）。
@thirtydot 是的，你是对的......错过了那个选择器:(
你的 CSS .table tr.even-row(even) 中的 (even) 是什么？看起来像是一个错字。
@usernotfound 是的，它已修复

【解决方案2】：

最佳实践：无 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;
}

【讨论】：

+1 不要为此使用 javascript。

【解决方案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 */ }

【讨论】：

使用 JavaScript 进行样式设置是一种不好的做法。虽然我知道这很容易解决，但至少尝试推荐一个服务器端解决方案作为首选，其次通过建议使用条件语句（如 @ 987654323@ - 请看我的回答。