HTML5 样板 +媒体查询在 IE8 中不起作用？
由于 Boilerplate 内置了 respond.js，理论上它应该能够支持以下 css：
@media only screen and (max-height: 580px){.rnd-class{:height:200px !important;}}
在 FF 和 Chrome 中，它按预期工作，并且自定义样式在调整浏览器窗口大小后启动。
然而，在 IE8 中，自定义样式始终处于启用状态 - 无论当前浏览器窗口有多大。
我认为问题出在我的代码中的某个地方，但是我访问了 Boilerplate 移动模板 并且我注意到它也更改了浏览器调整大小时的布局，并且使用默认样板中的相同媒体查询。
但是，即使是 移动 Boilerplate 也仅适用于 FF 和 Chrome。使用 IE8 访问它，媒体查询不会启动，我得到的是最小设备的版本。
现在我的问题是：你们在IE8中也有同样的经历吗？ 此网站在 IE8 中如何查找您，它是否会根据当前浏览器窗口大小更改其样式？
或者可能与我的特定IE版本有关？ （我现在无法在另一个 IE 版本上测试它）。
也许，只是也许，some1 知道这个问题的解决方案？
PS 我目前使用的是 HTML5 Boilerplate 附带的默认“Modernizr”（内置 respond.js）脚本。
Since Boilerplate has respond.js built-in, it should in theory be able to support following css:
@media only screen and (max-height: 580px){.rnd-class{:height:200px !important;}}
In FF and Chrome, it works as expected and the custom styles kick in after resizing the browser window.
However, in IE8 the custom styles are always enabled - no matter how big the current browser window is.
I was thinking that the problem is inside my code somewhere, but than I visited the Boilerplate mobile template and I have noticed that it changes its layout on Browser rezize too and it uses the same media queries from the default Boilerplate.
However, even the mobile Boilerplate only works with FF and Chrome. Visiting it with IE8, the media queries dont kick in and I get served the version for the smallest device.
Now my question is: do you guys experience the same in IE8? How does this site look for you in IE8 and does it change its styles depending on the current browser window size?
Or is it probably related to my specific IE version? (I cant test it on another IE version right now).
And maybe, just maybe, some1 knows a solution to this?
P.S. I am currently using the default "Modernizr" (with respond.js build-in) script that comes with the HTML5 Boilerplate.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
首先，您提到您无法访问其他版本的 IE，您是否见过
As an initial aside you've mentioned you haven't got access to other versions of IE, have you seen IETester? Using this tool I'm seeing the same behaviour as you where IE8 is not changing the styles in response to window size changes. IE9 correclty shows the main title resizing when the window size is reduced.
根据 http://caniuse.com/css-mediaqueries IE8 不支持媒体查询。但是您可以构建自定义 Modernizr，包括 MQ polyfil (respond.js) 以在此（和旧版）浏览器中启用 MQ。
According to http://caniuse.com/css-mediaqueries media queries are not supported in IE8. But you can build custom Modernizr, include MQ polyfil (respond.js) to enable MQ in this (and older) browsers.
Respond.js 仅适用于面向宽度的媒体查询；所以，它不适用于最大高度。我目前也在寻找解决方案。
编辑：我找到了解决方案。
http://code.google.com/p/css3-mediaqueries-js/
有条件地加载 IE8 及更低版本的脚本。你应该已经准备好了！
Respond.js only works with the width oriented media queries; so, it won't work with max-height. I'm currently look for a solution as well.
EDIT: I found a solution.
http://code.google.com/p/css3-mediaqueries-js/
Conditionally load that for script IE8 and below. You should be all set!
我编写了一个补丁，可以使用 respond.js 启用最小高度和最大高度媒体查询
希望它很快就能集成： https://github.com/scottjehl/Respond/pull/96
I wrote a patch that enables min-height and max-height media queries with respond.js
Hopefully it gets integrated soon: https://github.com/scottjehl/Respond/pull/96
我找到了一个不使用 JavaScript 的修复方法。
我遇到了同样的问题，但仅当我的媒体查询保存在单独的 .css 文件中时。这意味着如果我将它们保存在 html 中，它们就可以在 IE8 中工作。很奇怪，但由于某种原因它可以工作。这并不理想，但至少我解决了它，所以如果有人知道为什么会发生这种情况，或者我可以做什么来将我的 css 保存在单独的文件中，请告诉我！
I found a fix without using javascript.
I'm having the same problem but only when my media queries are saved in a seperate .css file. Meaning if I save them in the html they work in IE8. Very strange but it works for some reason. This is not ideal but atleast I get around it so if anyone has any ideas why this happens or what I can do to save my css in a separate file please let me know!