How to Exclude stylesheet from IE10 and above - css

Question

I have a few different stylesheets and one has #media queries that for some reason are being loaded regardless of screen size in IE. The #media queries were in my main Site.css file so I moved them to a 'new' stylesheet for all browsers. If put them in an IE specific stylesheet and remove them from all other stylesheets then everything works as planned since i'm targeting IE10 with the JS that adds the ie10 class if the correct browser loads so i'm good. Problem is that i need those #media queries for things to work on all other browsers and since IE10 and above have stopped using conditional statements i cant exclude the 'new' stylesheet by using the <!--[if !IE] comment.
If i use:
<!--[if !IE]>
<link href="#Url.Content(string.Format("{0}/css/search-media-queries.css", Model.RequestAuthorityUrl))" rel="stylesheet" type="text/css" />
<![endif]-->
It seems to work on all IE but it doesn't load the stylesheet in the other browsers. The syntax for the location of the stylesheet is a little odd but theres a purpose to that and it has nothing to do with the issue so i dont want to clutter this question wit
Any advice on how i should go about adding these styles to all browsers EXCEPT ie and then i can have them in the IE specific stylesheet so they wont load right away and break my layout. I understand this probably sounds confusing and was a difficult bug to finally figure out because i also couldn't see my code in the IE inpsector to debug so i had to just take out CSS until i finally noticed what it was.
ORIGINAL ISSUE:
What was happening is that i have a div with some inputs and have made that div responsive and tweaked with #media queries. If i load the page the div and it's contents are displayed as if already using one of the #media queries although the browser size is outside of the scope of the #media queries. If I resize the browser (make it smaller) and then i set it back to fit the full size of my screen then the correct layout is applied.
UPDATE CSS CODE EXAMPLE:
#media screen and (max-width: 1222px)
{
div#spiSearchWidget
{
width: auto;
}
div#spiSearchWidget #spiStartDate
{
margin-right: 20px;
margin-bottom: 0px;
}
div#spiSearchWidget .endDate
{
}
div#spiSearchWidget .adultLbl
{
margin-right: 58px;
margin-left: 20px;
}
div#spiSearchWidget .childLbl
{
margin-bottom: 0px;
}
div#spiSearchWidget select#Children
{
margin-left: 10px;
}
div#spiSearchWidget #spiSrchBtn
{
clear: none;
margin: 20px 70px 0px 70px;
}
}
#media screen and (max-width: 1104px)
{
#spi-walkin-searchbox .availContLrg
{
width: 20%;
}
div#spiSearchWidget
{
width: auto;
}
div#spiSearchWidget #spiStartDate
{
margin-left: 20px;
margin-bottom: 10px;
}
div#spiSearchWidget .endDate
{
clear: both;
margin-left: 10px;
}
div#spiSearchWidget .adultLbl
{
margin-left: 42px;
clear: both;
}
div#spiSearchWidget .childLbl
{
clear: both;
margin-bottom: 0px;
margin-left: 34px;
}
div#spiSearchWidget select#Children
{
margin-left: 10px;
clear: both;
}
div#spiSearchWidget #spiSrchBtn
{
clear: both;
margin: 20px 20px 0px 20px;
}
}
All of that is loaded from the beginning for some reason.

Answer 1

Your problem isnt about excluding stylesheets, it should be about getting it to work properly in all modern browsers. They removed conditional comments for a reason.
IE10 is not bad at rendering. Ive personally never had an issue with responsive code and IE9+. Maybe post a snippet so we can see how you're doing it?

Answer 2

I found this helpful, from http://www.impressivewebs.com/ie10-css-hacks/
if (/*#cc_on!#*/false && document.documentMode === 10) {
document.documentElement.className+=' ie10';
}