I have worked with media queries on a project for a while and notice that it is not actually working well in IE 7 or IE 8.
Here is a simple sample of the media query I have.
@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);
To make sure things working alright in those browsers, you will need a separate css file for those two. And a detection of “if it is less than IE9”, use the “style-ie.css”
<link rel="stylsheet" type="text/css" media="all" href="style.css"/> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/> <![endif]-->
