IE8 and below do not understand CSS Media Queries so it will ignore anything inside your first query, meaning IE users will see your base mobile styles. If you’d like to expand upon those, you have a few options.
Use the HTML classes
In the header, we have conditional statements setup for this precise reason:
<!--[if IEMobile 7 ]> <html <?php language_attributes(); ?> class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html <?php language_attributes(); ?> class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js"><!--
This means that if someone visits your site with IE7, the html element will have a class of ie7 as well as oldie. You can use these classes to target those users.
In your style.css create a space for IE styles and make sure it’s outside of any media queries. There you can use these classes to expand upon your base styles for IE users.
/* all IE6-8 users */
.oldie body { background: red; }
/* IE6 users */
.ie6 body { background: green; }
/* IE7 users */
.ie7 body { background: yellow; }
/* IE8 users */
.ie8 body { background: white; }
Create an IE Specific Stylesheet
If you prefer to keep your stylesheets untainted with IE fixes, you can create an IE stylesheet to house them all. To do this, you need to put a conditional statement in the header so that only IE users will get the styles applied.
<!--[if lt IE 9]>
<!-- ie stylesheet -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/ie.css">
<![endif]-->
Next, create your ie.css file and drop it in your library/css/ folder. Inside that folder you can then place any styles you’d like to be applied to IE users.
The current version has an ie.css file already setup.