Media Queries not working in Internet Explorer 10 - css

Question

These media queries are working well in other browsers except IE10, In this situation what should I do? How can I achieve this task?
#media screen and (max-width: 575.98px){
.layer-hover .plus, .layer-hover-2 .plus{
font-size: 2.5rem;
}
.layer-hover a, .layer-hover-2 a{
width: 70%;
padding: 5px 0;
font-size: 10px;
}
}

Answer 1

A few resources here on #media usage on Internet Explorer 11 and under.
Targetting Internet Explorer Best Practices
CanIUse #Media (Shows known issues with IE10)
Browser Compatability Best Practices.
IE10 Specific Styles (Some techniques)
IE10 CSS Hacks
IE10 vs Media Queries
Some people have been known to try tricks like below as well with success, but IE10 can be unforgiving. Note the prefixes and see the CanIUse Knowledge Objects.
#-ms-viewport {
width: device-width;
}
If that doesn't do the trick, you could try removing the screen parameter
and styling specifically for IE10 like so.
Per this article on targeting IE10, this little workaround exists since conditional comments aren't recognized since IE10.
#media (max-width: 575.98px)[data-useragent*='MSIE 10.0']{
.layer-hover .plus {
font-size: 2.5rem;
}
layer-hover-2 .plus[data-useragent*='MSIE 10.0'] {
font-size: 2.5rem;
}
.layer-hover a[data-useragent*='MSIE 10.0']{
width: 70%;
padding: 5px 0;
font-size: 10px;
}
.layer-hover-2 a[data-useragent*='MSIE 10.0'] {
width: 70%;
padding: 5px 0;
font-size: 10px;
}
}
Another possible hack you could try is mentioned on Mediacurrent with lots of success stories.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}