IE8：让“nth-child”选择器在媒体查询中工作？答案

【问题标题】：IE8: making the `nth-child` selector work inside media queries?IE8：让“nth-child”选择器在媒体查询中工作？
【发布时间】：2012-11-15 07:02:18
【问题描述】：

在我的网站项目中，我使用 媒体查询 和 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 polyfill。

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

【问题讨论】：

“[支持媒体查询的 polyfills] 独立工作”是什么意思？
@BoltClock am-teh.ru
@Shauna 这意味着他们不能一起工作。有人尝试将 Respond+mediatizr 结合起来，一些开发人员甚至取得了积极的成果，但这些努力并没有达到生产。 :( 例如，这是一个一年前的帖子：github.com/keithclark/selectivizr/issues/23
这是使 Respond 和 mediatizr 协同工作的另一项努力：selectivizr.com/tests/respond 不幸的是，它还没有准备好生产。 :(
出于好奇，为什么必须在 IE8 上使用媒体查询？是否适用于大屏幕布局？我总是告诉我的 QA 团队/和同事，任何在桌面上测试的站点都不应该针对小于主网格的任何尺寸（通常为 960 像素 - 1000 像素）进行 QA。我发现让网站在 IE 上以小于这样的大小运行是浪费时间和资源。回到几年前我们没有响应式设计的时候。那时我们不会测试小屏幕，现在仍然没有理由测试（在台式机上）。

标签： internet-explorer css internet-explorer-8 media-queries

【解决方案1】：

您的代码在 IE8 中不起作用，因为 IE8 doesn't support media queries at all。如果你想在 IE8 中进行媒体查询，那么你需要找到一个支持它的 polyfill。

您应该能够通过结合使用媒体查询和选择器 polyfill 来实现您想要的，您可以在同一页面上使用它们，因为它们通常被编写为不会相互干扰。

编辑如果 polyfill 真的不能相互配合，那么我会认真研究一下为什么您认为需要 IE8 的媒体查询支持。很有可能，只要做一些调整，让 IE8 做自己的事情，你就可以了。 IE8 用户很可能不会使用非常大或非常小的屏幕，因为 IE8 仅适用于 Windows XP 和一些 Windows Vista 机器（Win7 附带 IE9），而 Windows Phone 的市场非常小共享移动领域。机会是，你付出了很多努力，几乎没有回报。

但是，如果您确实发现出于某种原因需要对 IE8 的媒体查询类型支持，那么我会研究一个更基本的 JavaScript 选项，它只检测窗口大小并应用一个类因此（即使在香草 JS 中，这也应该非常简单，但大多数库都使这变得更加微不足道）。您可以将 JavaScript 引用包装在条件注释中，以便从其他所有浏览器对其进行沙箱处理。

【讨论】：

问题中已经提到了这一点 - 似乎 OP 无法让两个 polyfill 的组合一起工作。
Modernizr 所做的只是提供有关浏览器是否支持媒体查询和:nth-child() 使用的信息——它不会填充任何东西。
@BoltClock - 这并不是我真正理解“他们无济于事，因为他们独立工作”的意思。那条线向我表明，OP 不明白您实际上可以同时利用两个不同的 polyfill（前提是它们足够智能，可以自己命名空间）。
@BoltClock re Modernizr - 很公平。正如我所说，我自己没有使用它。但是，它确实提供了指向可能有用的 polyfill 列表的链接（包括其他几个用于媒体查询的）-github.com/Modernizr/Modernizr/wiki/…
@BoltClock 你为什么首先提到 Modernizr？

【解决方案2】：

我目前也遇到了同样的问题，我正忙于尝试一些想法来尝试完成这项工作。

一个似乎有效的hack是将 selectivizr.js 中的所有函数拉到全局级别（也需要全局声明变量）。然后，您可以更改 css-mediaqueries 以在将媒体查询的内容添加到样式之前调用 patchStyleSheet（the following version of css-mediaqueries.js 的第 916 行）：

styles[styles.length] = cssHelper.addStyle('@media ' + s.join('') + '{' + patchStyleSheet(mql.getCssText()) + '}', false);

所以，我并不是说这是一个理想的解决方案 - 在全局级别声明 selectivizr 中的所有函数和变量显然不是最好的主意 - 但是，它似乎确实有效并证明了它是可能的。再花一点时间，也许可以将这两个脚本组合成一个更好的解决方案。

【讨论】：

【解决方案3】：

好的，我想通了。

Selectivizr 和 Respond 都已修改为可以协同工作（1、2）。

问题是已对 Selectivizr 版本 1.0.3b 进行了必要的更改。截至 2013 年 3 月，1.0.3b 尚未发布。 Selectivizr 的官方网站和 CDN 上都没有它。它只能是项目仓库中的obtained，并且目前只有未压缩的版本可用。

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

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

NWMatcher（或替代）
选择性
回复

不要使用IE9.js！它有自己的媒体查询实现，与 Respond 一起将使您的网站在 IE

【讨论】：