媒体查询在特定 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

您似乎正在尝试以 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 浏览器的更多详细信息：

how to detect IE and Edge browsers in CSS?

Answer 2

您使用逗号而不是 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;
    }
}