考虑到 SingularityGS 默认遵循移动优先的方法,你们如何解决 IE8 中的问题,它显示了所有依赖于媒体查询的移动版本?
您是否找到了解决方案,还是我必须先切换到桌面?
谢谢。
最佳答案
您可以让 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填充物。要使 Respond 与 Selectivizr 一起工作,Selectivizr 应为 版本 1.0.3b 或更高版本 (由于某种原因尚未发布为稳定的 for two years)并且应该是 在响应 之前加载. 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 (aka 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 卡住。
关于internet-explorer-8 - 如何在 IE8 中使用移动优先,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16720043/