2

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

IE8 不支持开箱即用，但有一些 polyfill 可以提供帮助：

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

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

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

问题是 selectivizr 和 ie9.js 都不能解析nth-child媒体查询，并且支持媒体查询的 polyfill 无济于事，因为它们在一起使用时会干扰nth-childpolyfill。

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

4

3 回答 3

5

好的，我想通了。

Selectivizr 和 Respond 都被修改为一起工作（1、2）。

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

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

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

  1. NWMatcher（或替代品）
  2. 选择性
  3. 回应

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

于 2013-03-23T19:09:38.820 回答
2

您的代码在 IE8 中不起作用，因为IE8 根本不支持媒体查询。如果你想在 IE8 中进行媒体查询，那么你需要找到一个支持它的 polyfill。

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

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

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

于 2012-11-27T16:15:21.393 回答
1

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

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

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

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

于 2012-11-29T12:45:59.443 回答