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

【问题标题】：How to fix CSS so that it works in IE7 and IE8?如何修复 CSS 使其在 IE7 和 IE8 中工作？
【发布时间】：2016-03-10 11:41:58
【问题描述】：

我正在使用以下样式从我的 HTML 代码中动态显示替代颜色，但这些样式在 IE7 和 IE8 中不起作用。它的所有工作都来自上面的 IE9。我开始知道这些样式不兼容 IE7 和 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";
}

【问题讨论】：

stackoverflow.com/questions/10577674/…
您在最后一个选择器中的after 应该是:after。现代浏览器使用::after，但为了向后兼容，首选单冒号。

标签： html css internet-explorer internet-explorer-8 internet-explorer-7

【解决方案1】：

这应该对你有帮助 http://codepen.io/anon/pen/PZoBYa 我们基本上是通过js来操作的。这个想法是通过检查子元素是偶数还是奇数来循环添加 bg/class 的元素。对于after，js无能为力，所以我们用'after'创建一个类并添加它们

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

【讨论】：

【解决方案2】：

:nth-child 和 :not 在 IE8 或 IE7 中都不起作用。

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

如果您绝对不能重写 HTML，那么下一个最佳选择是使用 polyfill 脚本。最好使用的是Selectivzr。添加此脚本（如果您还没有 JQuery，请与 JQuery 一起添加），它将为旧 IE 版本添加对这些选择器的支持。该脚本通常运行良好；但是它可能会对您的站点产生性能影响，并且存在一些怪癖，例如，请注意尝试使用动态并由 JavaScript 更新的 HTML 选择器。请务必彻底测试。

另一个选项是“优雅的后备”。只要您的 CSS 在这些选择器不起作用时具有合理的默认值，它甚至可能无关紧要。例如，如果您使用:nth-child 突出显示表格中的交替行，IE8 用户是否看到所有行都具有相同的颜色真的很重要吗？只要确保默认值是合理的，这就足够了。

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

【讨论】：