样式与媒体查询在ngView中IE工作后刷新

Style with media queries inside ngView for IE work after refresh

本文关键字：IE 工作 刷新 ngView 媒体 查询 样式      更新时间：2023-09-26

我在IE10中遇到了css规则的问题，当它们是由ngView包含的内部页面(我使用的是Angular 1.0.6)。它可以在其他浏览器上正常工作(我认为它可以在IE11上工作，我自己没有测试):

我有这样的css:

.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; }
}
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>

css在我的页面上的<style>标签，在ngView中渲染。对于大于1041px的页面，它同时显示m1和m3。当我调整浏览器的大小，m3消失。它也工作，当我有style和html在页面内，而不是在ngview。

这里有什么问题?IE10有bug吗?如何修复我的css?是关于媒体提问的，也许是提问的顺序?

我可以通过在该规则中添加min-width来修复它:

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

不知道为什么，但它工作

相关文章：