问题
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.
回答1:
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.
回答2:
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.
回答3:
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!
回答4:
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
回答5:
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!
来源：https://stackoverflow.com/questions/8240107/html5-boilerplate-media-queries-not-working-in-ie8