internet-explorer - IE8 : making the `nth-child` selector work inside media queries?

Question

在我的网站元素中，我使用媒体查询 和nth-child 选择器。

IE8 不直接支持它们，但有 polyfill 可以提供帮助:

• Respond.js , mediatizr或 css3-mediaqueries.js在 IE8 中启用媒体查询；
• selectivizr或 ie9.js启用第 n 个子选择器。

我的问题是我需要在媒体查询中使用nth-child。一个综合的例子:

@media (min-width: 500px) {
  .foo:nth-child(2n) {
    color: pink;
  }
}

我需要这段代码才能在 IE8 中工作。

问题是 selectivizr 和 ie9.js 都不会在媒体查询中解析 nth-child，而启用媒体查询的 polyfill 也无济于事，因为它们会干扰 nth-child polyfills 一起使用时。

请提出一种使该代码在 IE8 中工作的方法!

Answer 1

好吧，我明白了。

Selectivizr 和 Respond 都经过修改以协同工作(1、2)。

问题是已对 Selectivizr 1.0.3b 版进行了必要的更改。截至 2013 年 3 月，1.0.3b 尚未发布。它既不在 Selectivizr 的官方网站上，也不在 CDN 中。只能是obtained来自元素的 repo，目前只有未压缩版本可用。

发布后响应更及时，所以最新的官方版本就可以了。

请注意，应首先包含 Selectivizr，然后再包含 Respond。并且不要忘记包括 Selectivizr's requirements 之一在 Selectivizr 之前!所以正确的顺序是:

1. NWMatcher(或替代方案)
2. 选择性
3. 回应

并且不要使用 IE9.js !它有自己的媒体查询实现，与 Respond 一起将使您的网站在 IE < 9 中无法使用。