CODEWITHSUNDEEP
internet-explorercssmedia-queries
someoneinomaha
someoneinomaha

Reputation: 1304

IE 8 ignores media query but max-width media query works

I'm using respond.js on a project and using two media queries with mixed success.

This one: @media only screen and (max-width: 399px) { rules... } - works perfectly well.

This one: @media print { rules... } - does not work at all.

Both media queries are in the same overall style sheet (using boilerplate). I can't understand why IE would ignore one but not the other.

Any advice would be greatly appreciated. Other browsers (Firefox, Safari, Chrome) work without any problems.

Upvotes: 1

Views: 891

Answers (1)

someoneinomaha
someoneinomaha

Reputation: 1304

I came across this post this morning - not sure how I missed it when I was searching previously:

Internet Explorer 8 won't modify HTML5 tags in print stylesheet

The problem I was having was related to using html5 tags since those were the elements I was trying to modify. I was using Modernizr on the page, but the version we were using didn't include html5shiv/printshiv I guess so when we were trying to print the browser was just ignoring the and other html5 tags referenced in the print stylesheet.

Adding the html5shiv/printshiv libraries for IE solved my issue.

Upvotes: 2

Related Questions