媒体查询在特定的 IE 查询中不起作用

Question

我正在尝试仅在一个浏览器 (IE) 中使用媒体查询，但我尝试过的都不起作用。

例如：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Styles go here for IE */
    @media screen and (max-width: 700px) {
        .article {
            width: 100%!important;
        }
    }
 }

我正在尝试使用仅适用于 IE 的媒体查询，但没有任何影响。我也试过：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (max-width: 1320px) {
    div#desktop-nav {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}

我在媒体查询的末尾添加了最大宽度。

如果有人知道如何为特定浏览器进行媒体查询，请告诉我

Answer 1

您用逗号分隔条件而不是 and 关键字

@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) and (max-width: 1320px) {
    div#desktop-nav {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}

Answer 2

看起来您正在尝试以 IE 10+ 为目标，因此请尝试使用 all 选择器而不是 screen 选择器。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
}

如果您尝试以 IE 9 或更低版本为目标，则必须加载条件样式表，如下所示：

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

您可以在此处找到有关此浏览器和其他 Microsoft 浏览器的更多详细信息：

媒体查询在特定的 IE 查询中不起作用

Media queries not working in specific IE query

html

css

internet-explorer

media-queries