15

考虑到 SingularityGS 默认遵循移动优先的方法，你们如何解决 IE8 中的问题，它显示了所有依赖于媒体查询的移动版本？

您是否找到了解决方案，还是我必须先切换到桌面？

谢谢。

4

2 回答 2

36

您可以让 IE 7-8 真正支持媒体查询，而不是解决 IE 7 和 8 的缺点！

我使用了很棒的Respond.js polyfill在 IE 7 和 8 中启用媒体查询。只需将此代码添加到您的 HTML 中<head>，您就可以开始了！ 

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

您可能还想在 IE 7 和 8 中启用 CSS3 选择器，这样类似的东西.column:nth-child(#{$i}n) { @include float-span(1, 'last'); }就可以工作了。

你需要Selectivizr polyfill。要使 Respond 与 Selectivizr 一起工作，Selectivizr 的版本应该是 1.0.3b 或更高版本（由于某种原因两年来尚未发布为稳定版），并且应该在 Respond 之前加载。Selectivizr 还需要在它之前加载NWMatcher或替代方法。所以正确的顺序是这样的：

<!--[if lt IE 9]>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

你还应该拥有html5shiv polyfill（又名 html5shim）来让 IE 7-8 支持最基本的 CSS3 内容。

所以我最终的 IE 7-8 polyfills 看起来像这样：

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

注意：不要将IE9.js与这些结合使用，因为它会使 IE 8 冻结。

于 2013-05-24T09:46:13.593 回答
7

我将 Breakpoint 内置的 No Query Fallback 支持与我的 HTML 标记上的 IE 类或用于媒体查询支持的 Modernizr 测试结合使用。

https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks

于 2013-05-23T17:25:59.887 回答