考虑到 SingularityGS 默认遵循移动优先的方法,你们如何解决 IE8 的问题,IE8 显示依赖于媒体查询的所有内容的移动版本?
你们已经找到了解决方案还是我需要切换到桌面优先?
谢谢。
考虑到 SingularityGS 默认遵循移动优先的方法,你们如何解决 IE8 的问题,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 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冻结。