HTML5 Boilerplate + 媒体查询在IE8中无法工作?

3

由于Boilerplate内置了respond.js,理论上应该能够支持以下CSS:

@media only screen and (max-height: 580px){.rnd-class{:height:200px !important;}}

在FF和Chrome中,它按预期工作,并且在调整浏览器窗口大小后自定义样式生效。
然而,在IE8中,自定义样式始终启用-无论当前浏览器窗口大小如何。
我认为问题可能在我的代码中,但是当我访问Boilerplate mobile template时,我注意到它也会在浏览器重新调整大小时更改其布局,并使用与默认Boilerplate相同的媒体查询。
然而,即使是mobile Boilerplate,它也只适用于FF和Chrome。在IE8中访问它,媒体查询不起作用,并且我得到了最小设备版本。
现在我的问题是:你们在IE8中有同样的经历吗?this site在IE8中是什么样子的,它是否根据当前浏览器窗口大小更改其样式?
或者可能与我的特定IE版本有关吗?(我现在无法在另一个IE版本上进行测试)。
也许,只有一些人知道解决方法?

顺便说一句,我目前正在使用随同HTML5 Boilerplate一起提供的默认“Modernizr”(内置respond.js)脚本。


请注意,我们已从H5BP 3.0中删除了respond.js支持。 - Divya Manian
5个回答

1
作为一个初始的侧面说明,您提到您没有访问其他版本的IE,您是否看过IETester?使用这个工具,我看到了与您相同的行为,即IE8不会根据窗口大小的变化而改变样式。IE9在减小窗口大小时正确地显示主标题的调整大小。

谢谢提供链接!那个软件看起来很棒 :) 既然在IE8中也没有看到任何样式变化,我们可以假设这是一个与我的代码无关的错误,我是对的吗? - r0skar
我知道这篇文章有点老了,但是根据我的经验,当测试使用JavaScript的功能时,不能信任IETester。我发现最好的选择是在虚拟机中安装正确版本的IE,以便在需要正确版本的情况下使用。 - LocalPCGuy

0

我找到了一个解决方案,而不使用JavaScript。

我遇到了同样的问题,但只有当我的媒体查询保存在单独的.css文件中时才会出现。也就是说,如果我将它们保存在HTML中,它们就可以在IE8中正常工作。非常奇怪,但由于某种原因它能够正常工作。这并不理想,但至少我已经绕过了这个问题,所以如果有人知道为什么会出现这种情况,或者我该如何将我的CSS保存在单独的文件中,请告诉我!


0

Respond.js 只能处理基于宽度的媒体查询,因此无法处理 max-height。我目前也在寻找解决方案。

编辑:我找到了一个解决方案。

http://code.google.com/p/css3-mediaqueries-js/

有条件地加载该脚本,适用于IE8及以下版本。您应该已经准备就绪!


我简直不敢相信 Respond.js 在 max-height 方面完全无法工作,因为它在 Firefox 中运行良好 - 只是在 IE 中不行。尽管如此,非常感谢!我明天会尝试您提供的脚本,并告诉您结果! - r0skar

0

0
根据http://caniuse.com/css-mediaqueries,IE8不支持媒体查询。但是,您可以构建自定义的Modernizr,并包含MQ polyfil(respond.js)以在这个(和更旧的)浏览器中启用MQ。

我在我的问题中写道,我正在使用HTML5 Boilerplate,其中包含respond.js,但仍然无法正常工作...您在他们的移动站点上使用IE的经验如何?当调整IE窗口大小时,查询是否对您起作用? - r0skar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接