Question

在我的AngularJS应用程序中，CSS媒体查询仅在IE9和IE10上无法正常工作。为小屏幕定义的媒体查询正在全局影响。它仅在我调整浏览器大小或检查元素时才有效。

Chrome和Firefox等其他浏览器都没有问题。我还没有在IE10 +浏览器中对此进行测试。当我删除AngularJS时，它在IE8 +中工作。这是我的媒体查询：

＆＃13;

@media (min-width: 0px) and (max-width: 767px) { 
    .col-sidebar{ width:100%}
    .col-content{ width:100%}
}

＆＃13;

在IE10浏览器的大屏幕中，侧边栏显示100％宽度。

这是我的大屏幕全局css：

.col-sidebar{ width:30%}
.col-content{ width:70%}

Answer 1

您使用了初始关键字which is not supported in Internet Explore。

我删除了所有初始关键字并替换为默认值。 Jsfiddle

CSS

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#header {
    height: 116px;
    background-color: #333;
}

#sidebar, #content {
    position: absolute;
    top: 7.2em;
    bottom: 0;
    overflow: auto;
}

#sidebar {
    width: 392px;
    overflow-x: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: 999;
    overflow: hidden;
    background-color: red;

}
#map_canvas {background-color: green;}
#content {
    overflow: hidden;
    left: 24em;
    right: 0;
    background-color: green;
}

#map_canvas {
    height: 100%;
}

@media only screen and (max-width: 768px) {
    body {
        padding-bottom: 40px !important;
    }
    .box {
        width: 100%;
        }
    #sidebar {
        width: 100%;
        overflow-x: hidden;
        box-shadow: none;
        z-index: auto;
    }

    #sidebar, #content {
            bottom: auto;
            position: static;
    }

    #content {
        overflow: visible;
        left: auto;
        right: auto;
        height: 100%;
    }

}

在ng-app应用程序中，css媒体查询在ie9和ie10上无法正常工作

1 个答案: