media query not being picked up in IE

I have the following test code in my css file:

@media only screen and (min-width: 960px){
    body{
        background-color: red;
    }
    .wrapperShadow {
        margin: 0px 3em;
        box-shadow: 0px 0px 2.5em 0.5em rgba(0, 0, 0, 0.4);
    }
    .wrapperShadow {
        margin: 0px 3em;
        box-shadow: 0px 0px 2.5em 0.5em rgba(0, 0, 0, 0.4);
    }

 }

I added the red just as a test. But in IE, it's not picking this css as per the F12 tool
I'm just wondering what the problem could be.

EDIT 1:

What I'm noticing is that my site is defaulting to compatibility mode, on various pages. When I turn off compatibility mode using the little broken page symbol in the address bar, the page looks correct.
why does it default to compatibility mode? is it because I have the following line in my header:

<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

Solution

Do you have compatibility mode turned on? Check that...

(IE9 Under "Compatibility View Settings" it had the "Display Intranet Sites in Compatibility View")

Good Luck..)