HTML5 Boilerplate +媒体查询无法在IE8中运行?

时间:2011-11-23 09:49:06

标签: javascript media-queries modernizr html5boilerplate

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

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

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

但是,在IE8中,无论当前浏览器窗口有多大,都始终启用自定义样式。

我认为问题出在我的代码内部,但是我访问了Boilerplate mobile template并且我注意到它也改变了它在浏览器rezize上的布局,它使用了来自默认Boilerplate的相同媒体查询。

但是,即使mobile Boilerplate仅适用于FF和Chrome。使用IE8访问它时,媒体查询不会启动,我可以获得最小设备的版本。

现在我的问题是:你们在IE8中经历过同样的经历吗? this site如何在IE8中找你并根据当前的浏览器窗口大小更改其样式?

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

也许,也许,某些人知道解决方案吗?

P.S。我目前正在使用HTML5 Boilerplate附带的默认“Modernizr”(带有respond.js内置)脚本。

5 个答案:

答案 0 :(得分:1)

首先,你提到你没有访问其他版本的IE,你见过IETester吗?使用此工具我看到的行为与IE8在更改窗口大小更改时不更改样式的行为相同。当窗口大小减小时,IE9 correclty显示主要标题的大小调整。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

Respond.js仅适用于面向宽度的媒体查询;所以,它不适用于max-height。我目前正在寻找解决方案。

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

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

有条件地加载脚本IE8及以下版本。你应该全力以赴!

答案 3 :(得分:0)

我编写了一个补丁,可以使用respond.js

启用min-height和max-height媒体查询

希望很快就会整合:https://github.com/scottjehl/Respond/pull/96

答案 4 :(得分:0)

我在不使用javascript的情况下找到了修复程序。

我遇到了同样的问题,但仅当我的媒体查询保存在单独的.css文件中时。这意味着如果我将它们保存在IE8中的html中。很奇怪,但它有一些原因。这不是理想的,但至少我绕过它所以如果有人有任何想法为什么会发生这种情况或我可以做些什么来保存我的CSS在一个单独的文件中,请告诉我!