javascript - HTML5 Boilerplate + Media Queries not working in IE8? - Stack Overflow

admin管理员组

文章数量:1431918

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 es with the HTML5 Boilerplate.

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 es with the HTML5 Boilerplate.

• javascript
• media-queries
• modernizr
• html5boilerplate

Share Improve this question Follow edited Nov 23, 2011 at 9:59 r0skar asked Nov 23, 2011 at 9:49 r0skarr0skar 8,7261414 gold badges5353 silver badges7070 bronze badges 1

• Note that we have removed respond.js support from H5BP 3.0 – Divya Manian Commented Feb 13, 2012 at 1:46

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

According to http://caniuse./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 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./p/css3-mediaqueries-js/

Conditionally load that for script IE8 and below. You should be all set!

I wrote a patch that enables min-height and max-height media queries with respond.js

Hopefully it gets integrated soon: https://github./scottjehl/Respond/pull/96

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!

本文标签： javascriptHTML5 BoilerplateMedia Queries not working in IE8Stack Overflow