HTML5 样板 + 媒体查询在 IE8 中不起作用？答案

【问题标题】：HTML5 Boilerplate + Media Queries not working in IE8?HTML5 样板 + 媒体查询在 IE8 中不起作用？
【发布时间】：2011-11-23 09:49:06
【问题描述】：

由于Boilerplate内置了response.js，理论上应该可以支持以下css：

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

在 FF 和 Chrome 中，它可以按预期工作，并且在调整浏览器窗口大小后会启动自定义样式。

但是，在 IE8 中，自定义样式始终处于启用状态 - 无论当前浏览器窗口有多大。

我原以为问题出在我的代码中，但我访问了Boilerplate mobile template，我注意到它也改变了浏览器调整大小的布局，并且它使用了默认样板文件中的相同媒体查询。

但是，即使mobile Boilerplate 也只能与 FF 和 Chrome 一起使用。用 IE8 访问它，媒体查询不启动，我得到了最小设备的版本。

现在我的问题是：你们在 IE8 中是否有同样的体验？ this site 是如何在 IE8 中查找你的，它是否会根据当前浏览器窗口大小改变其样式？

或者它可能与我的特定 IE 版本有关？（我现在无法在另一个 IE 版本上测试它）。

也许，只是也许，some1 知道解决这个问题的方法？

附：我目前正在使用 HTML5 Boilerplate 附带的默认“Modernizr”（内置 respond.js）脚本。

【问题讨论】：

请注意，我们已从 H5BP 3.0 中删除了 respond.js 支持

标签： javascript media-queries modernizr html5boilerplate

【解决方案1】：

首先，您提到您无法访问其他版本的 IE，您见过IETester 吗？使用这个工具，我看到了与您相同的行为，即 IE8 不会更改样式以响应窗口大小的变化。 IE9 correclty 显示缩小窗口大小时调整主标题的大小。

【讨论】：

感谢您的链接！该软件看起来很糟糕 :) 由于您在 IE8 中也没有看到任何样式更改，我们可以假设它是一个与我的代码不相关的错误，对吗？
我知道这篇文章有点老了，但根据我的经验，你不能信任 IETester，尤其是在测试使用 JavaScript 的功能时。我发现的最佳选择是在需要正确版本的情况下在虚拟机中安装正确版本的 IE。

【解决方案2】：

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

【讨论】：

我在我的问题中写道，我正在使用 HTML5 Boilerplate，它内置了 response.js，但它仍然无法正常工作...您在 their mobile site 上使用 IE 的经验如何？调整 IE 窗口大小时，查询对您有用吗？

【解决方案3】：

Respond.js 仅适用于面向宽度的媒体查询；所以，它不适用于最大高度。我目前也在寻找解决方案。

编辑：我找到了解决方案。

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

有条件地为脚本 IE8 及以下版本加载。你应该准备好了！

【讨论】：

我不敢相信 Respond.js 根本不能使用 max-height，因为它确实在 FF 中可以正常工作 - 它只是在 IE 中不行。尽管如此，还是非常感谢！明天我会试试你链接的脚本，让你知道结果！

【解决方案4】：

我编写了一个补丁，可以使用 respond.js 启用 min-height 和 max-height 媒体查询

希望它尽快集成：https://github.com/scottjehl/Respond/pull/96

【讨论】：

【解决方案5】：

我找到了一个不使用 javascript 的修复方法。

我遇到了同样的问题，但只有当我的媒体查询保存在单独的 .css 文件中时。这意味着如果我将它们保存在它们在 IE8 中工作的 html 中。很奇怪，但出于某种原因它可以工作。这并不理想，但至少我解决了它，所以如果有人知道为什么会发生这种情况，或者我可以做些什么来将我的 css 保存在一个单独的文件中，请告诉我！

【讨论】：