Question

我使用以下样式从我的HTML代码动态显示替代颜色，但这些样式在IE7和IE8中不起作用。它全部来自IE9以上。我开始知道这些样式与IE7和IE不兼容。 8。

你能否在CSS中展示替代方法，以便它们在IE7及以上版本中工作？

table.idclass tbody tr:nth-child(2n) td {
    background-color: red;
}

table.idclass tbody tr:nth-child(2n+1) td {
    background-color: blue;
}

table.idclass thead tr th:not(.innerclassid) after {
    content: "\25C0\25C0";
}

Answer 1

这应该对你有所帮助 http://codepen.io/anon/pen/PZoBYa 我们基本上用js操纵事物。我们的想法是通过检查子项是偶数还是奇数来循环遍历元素add bg / class。对于之后，js很无奈，所以我们创建了一个类＆＃39;之后＆＃39;并添加它们

elem = $('div');

for(i=0;i<elem.length;i++){
    bg = (i%2 == 0) ? 'red' : 'blue';
    $(elem[i]).css('background',bg);
    if(!$(elem[i]).hasClass('inner'))           
        $(elem[i]).addClass('afterContent');
}

Answer 2

无论是:nth-child还是:not都不适用于IE8或IE7。

在您使用这些选择器的大多数情况下，如果您需要支持IE7 / IE8，您只需重写HTML，以便您需要使用这些选择器选择的所有内容都具有您的类或ID可以直接选择。例如，将odd和even类添加到表行。这通常是最明智的解决方案。

如果您绝对无法重写HTML，那么下一个最佳选择是使用polyfill脚本。最好使用的是Selectivzr。添加此脚本（如果您还没有JQuery，则与JQuery一起添加），并且会将这些选择器的支持添加到旧的IE版本中。这个脚本通常运行得很好;但是它可能会对您的网站产生性能影响，并且存在一些怪癖，例如，要小心尝试使用动态HTML并通过JavaScript进行更新的选择器。一定要彻底测试。

另一种选择是＆＃34;优雅的后备＆＃34;。只要您的CSS在这些选择器不起作用时具有合理的默认值，它甚至可能都不重要。例如，如果您使用:nth-child突出显示表中的备用行，那么IE8用户是否看到所有行的颜色相同真的很重要吗？只需确保默认值是合理的，这应该足够了。

最后，停下来再问自己，真的是否需要支持IE7和IE8。这些IE版本现在已经很老了，而且非常的使用率很低。在做任何工作之前，请考虑它将影响的用户数量，以及是否值得努力完成所需的工作。

如何修复CSS使其在IE7和IE8中工作？

2 个答案: