Style with media queries inside ngView for IE work after refresh

Question

I have problem with css rules inside IE10 when they are inside page included by ngView (I'm using Angular 1.0.6). It work fine for other brower (I think that it work for IE11, didn't tested myself):

I have css like this:

.checker {
    display: none;
}

@media (min-width: 1041px) {
    .m1 { display: block; }
}
@media (min-width: 980px) and (max-width: 1040px) {
    .m2 { display: block; }
}
@media (max-width: 767px) {
    .m3 { display: block; }
}
@media (max-width: 979px) {
    .m4 { display: block; }
}

and html:

<span class="checker m1">m1</span>
<span class="checker m2">m2</span>
<span class="checker m3">m3</span>
<span class="checker m4">m4</span>

the css is inside <style> tag on my page that's rendered inside ngView. And for page lareger then 1041px it show both m1 and m3. When I resize the browser the m3 disappear. It also work when I have the style and html inside the page not inside ngVew.

What is the problem here? is there a bug in IE10? How to fix my css? It's something with media queries, maybe the order of them?

Answer 1

I was able to fix it by adding min-width to that rule:

@media (max-width: 767px) and (min-width: 100px) {

No idea why but it work.