Internet Explorer 11 中的媒体查询阅读最后一篇

Question

我尝试了一些 @media 查询，

@media all and (max-width: 1200px) and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .breadcrumb.Connect {
        bottom: 176%;
    }
}
@media all and (min-width: 1920px) and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .breadcrumb.Connect {
        bottom: 181.5%;
        left: -30%;
        width: 160.2%;
    }
}
@media all and (min-width: 1201px) and (max-width: 1919px) and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .breadcrumb.Connect {
        bottom: 172.5%;
        left: -7.5%;
        width:115.2%;
    }
    div.newsletter-container-connect div.right-form-block {
        width: 43%;
    }
}

无论我选择什么分辨率示例 1920px，但是该元素的样式 (breadcrumb.Connect) 被最后一个覆盖规则 ((最小宽度: 1201px) 和 (最大宽度: 1919px)).

Answer 1

这里有两个冲突的媒体查询，如果您将两个冲突的规则应用于相同的元素，浏览器将选择最后声明的一个。更改媒体查询的顺序。

Answer 2

(min-width: 1201px) and (max-width: 1919px)

此条件适用于大于或等于 1201 像素且小于或等于 1919 像素的宽度，即永远不会成立。不过，此处逗号的优先级低于 and，因此 (-ms-high-contrast:none) 导致应用所有规则。

Internet Explorer 11 中的媒体查询阅读最后一篇

Media Query in Internet Explorer 11 reading last one

css

media-queries

internet-explorer-11