Html5 Boilerplate + Media Queries Not Working In Ie8?

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;}}

Solution 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.

Solution 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.

Solution 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!

Solution 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

Solution 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!