0

Is there anyway that I can make IE9 ignore media queries or obey min-width?

I have a site that I have used media queries for responsive design for mobile devices and they work great, they also work great in all modern browsers. The problem is that I have some users that are using quite old browsers (some are still using IE6 believe it or not, no fault of their own and completely unavoidable) so I have a conditional style sheet for IE9 and set the min-width of the page because I don't want any of the media queries I have used to apply to those browsers.

body{
    min-width:1000px !important;
}

Both IE9 and and IE8 are obeying all of the rules I have put in the conditional stylesheet except IE9 which is ignoring the min-width rule for the body. That means when it is resized the media rules kick in and kill the layout.

Is there a reason why IE9 would ignore min-width or is there a conditional statement I can use so the media queries don't apply to IE9?

tatty27
  • 1,553
  • 4
  • 34
  • 73

2 Answers2

2

It's best to put these old browser targets into conditional comments in your HTML that reference different stylesheets or attach unique classes to your <html> element for targeting:

<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if IE 9]><html class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><html lang="en"><![endif]-->

And then you can specifically disable or enable certain CSS with the classes:

@media (min-width: 700px) {
    .ie9 .yourNormalTarget {
        width: 1000px;
    }
}
Alejalapeno
  • 1,008
  • 7
  • 11
  • Hi, I can't see how this will make IE9 obey min-width when it is already in css file targeted at ie9? – tatty27 Feb 10 '17 at 19:10
1

Tough to know without seeing your code, but you could be in quirks mode. Make sure that you have a <!DOCTYPE html> added to prevent that.

Zach L
  • 712
  • 4
  • 18