8

I have included some media queries in my design to change the width of some elements of the page based on the browser's width. The queries look like this:

@media screen and (min-width:1024px)
@media screen and (max-width:1024px)

Chrome, Safari and Firefox work great, only IE is a problem. I know that all versions prior to IE 9 don't support this feature, but they don't work in IE 9 at all. What might be the problem?

Sacha
  • 2,813
  • 3
  • 22
  • 27

4 Answers4

13

Do you have compatibility mode turned on?

Antony Scott
  • 21,690
  • 12
  • 62
  • 94
  • 1
    Compatibility mode was turned on. Turning it off solved the issue. Thank you very much. – Sacha Aug 02 '11 at 20:03
  • 2
    Thanks this solved my problem too ... thought I'd mention in case it helps anyone else that on my IE9 Under "Compatibility View Settings" it had the "Display Intranet Sites in Compatibility View" option ticked, which appeared to be the default ??? and this was affecting sites served from my WAMP server – byronyasgur Sep 20 '12 at 20:00
  • Is Compatibility Mode a default mode on IE9 ? – estellechvl Jul 22 '14 at 14:45
2

Make sure you have right DOCTYPE declaration. It's strongly recommended that websites use the HTML5 document type in order to support the widest variety of established and emerging standards (in this case: CSS3), as well as the broadest range of web browsers: <!DOCTYPE html>

Eugene Kardash
  • 360
  • 3
  • 9
0

use the following conditions 

@media only screen (min-width: 1px) and (max-width:599px)

instead of 

@media only screen (max-width:599px)

and make sure min-width is 1px as IE9 doesn't pickup 0px

Paul Roub
  • 36,322
  • 27
  • 84
  • 93
Sameh
  • 1,318
  • 11
  • 11
-6

Unfortunately min-width is simply not supported in any version of IE. So if you use this convention:

<!---  CSS Selector :: Desktop --->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop">

<!---  CSS Selector :: Tablet PC --->
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet">

<!---  CSS Selector :: Phone --->
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone">

It will ignore it all.

Reference.

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
Christopher Walker
  • 1
  • 1
    It would be helpful if you provided a workaround. And according to your 'Reference' link, IE 7-9 all support `min-width`. –  Nov 27 '11 at 13:11