Experiencing issues with CSS rules in IE10 when included in a page via ngView (using Angular 1.0.6). Works fine in other browsers (potentially IE11, not personally confirmed):
Here is the CSS code:
.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 the 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 within a <style> tag on the page rendered inside ngView. For pages larger than 1041px, both m1 and m3 are displayed. Upon browser resize, m3 disappears. The setup works when CSS and HTML are not in ngView.
What might be causing the issue here? Is it a bug in IE10? How can the CSS be fixed? Could it be related to the order of the media queries?