ie11 没有选择最高的媒体查询

Question

我有媒体查询，所以页面是响应式的。当分辨率为 1600x1200 时，ie11 没有拾取最高级别集，它没有拾取 min-width:1600px。然而，当分辨率为 1920x1080 时，它会选择正确的媒体查询 css。当我使用开发人员工具模拟 ie 10 时，媒体查询工作。

@media screen and (max-width:1599px) and (min-width:1200px){
    /** HEADER **/
    .header_container{
            top: 0px;
            border: solid 0px red;
            height: 100px;
            background-color: #f4f4f4;
            border-bottom: solid 1px #e5e5e5;
    }
    .top_nav_container_dark{
        height: 30px;
    }

    .container{
            width: 1070px;
    }

    .page_heading{
        top: 10px;
    }
    .header_logo{
            position: absolute;
    top: 0px;
    }
    .header_logo visible-desktop img{
        width: 88px;
    }

    /** END OF HEADER **/


    #wrapper{
        width:1040px;
        margin: 0 auto;
    }
    #page-wrapper {
        border-left: 1px solid #54575A;

    }

    #network-graph{
        width: 550px;
        height: 450px;
    }

    .col-lg-3 {
        width: 32%;
    }

    .col-lg-8 {
        width: 100%;
    }

    #network-graph{
        width: 800px;
        height: 450px;
    }

    .col-lg-4 {
        width:100%;
    }


    #my-tab-content{

    }
}

@media screen and (min-width:1600px){
    /** HEADER **/
    .header_container{
            top: 0px;
            border: solid 0px red;
            height: 100px;
            background-color: #f4f4f4;
            border-bottom: solid 1px #e5e5e5;
    }
    .top_nav_container_dark{
        height: 30px;
    }

    .container{
        width: 1200px;
    }

    .page_heading{
        top: 10px;
    }
    .header_logo{
            position: absolute;
    top: 0px;
    }
    .header_logo visible-desktop img{
        width: 88px;
    }

    /** END OF HEADER **/

    #wrapper{
        width:1170px;
        margin: 0 auto;
    }

    #page-wrapper {
        border-left: 1px solid #54575A;

    }

    #network-graph{
        width: 1000px;
        height: 500px;
    }

    .col-lg-3 {
        width: 32%;
    }

    .col-lg-8 {
        width: 100%;
    }

    .col-lg-4 {
        width:100%;
    }


    #my-tab-content{

    }
}

@media(min-width:1920px){
    .container{
        width:1600px;
    }

    #wrapper{
        width:1570px;
        margin: 0 auto;
    }

    #page-wrapper {
        border-left: 1px solid #54575A;

    }

    #network-graph{
        width: 1350px;
        height: 500px;
    }

    .col-lg-3 {
        width: 32%;
    }

    .col-lg-8 {
        width: 100%;
    }

    .col-lg-4 {
        width:100%;
    }


    #my-tab-content{

    }
}

在 1600x900 的 lenova 默认分辨率上，ie 11 不起作用。拿起 media min-width:1200。 chrome 工作正常

Answer 1

1600 x 900 在 1920 x 1080 之后

ie11 没有选择最高的媒体查询

ie11 not picking up highest media query

css

media-queries

internet-explorer-11