如何将分辨率与仅针对 IE 11 或更高版本的媒体查询相结合？

Question

我知道这个可能重复的问题。但我的情况不同。我遇到过可能的 SO 解决方案，但 none 适合我的情况。

是任何可能的或有效的组合，如以下组合，我正在尝试将分辨率与仅针对 IE 11 或更高版本的媒体查询相结合。

例如：

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-width:992px) and (max-width:1024px) {
      .want-my-css-here{

    }

}

我已经完成了以下常见用途的媒体查询

@media only screen and (min-width:992px) and (max-width:1024px) {
   .some-example-class{
         ....
    }
}

但在 IE 11 中，很少有东西在特定分辨率下无法正常工作。为此，我有 IE

的媒体查询

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown {
        position: relative;
        display: block;
    }

    .dropdown-menu {
        top: 56%
    }
}

我想知道如何在上述 IE 定向媒体查询中添加分辨率。

正是我需要的 .dropdown 和 .dropdown-menu 应该在 IE 的特定分辨率下工作。

否则请告诉我如何通过 javascript/打字稿控制它。有人可以帮我吗？

以下组合对我不起作用

@media only screen and (min-width:992px) {
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .dropdown-menu {
            top: 36%
        }
    }
}

谢谢

Answer 1

我遇到了同样的问题，所以，我使用 javascript 确定浏览器，而不是使用媒体查询，然后将特定的 class 附加到 body，然后应用我的样式范围他们在那 class.

Answer 2

备注

Internet Explorer (IE) 11 桌面应用程序将从 2022 年 6 月 15 日开始终止对某些操作系统的支持。- Microsoft

您的 @media 逻辑不正确。将 and (max-width:1024px) and (min-width:992px) 与 media features.

一起使用

 @media  all and (-ms-high-contrast: none) and (min-width:992px)  and (max-width:1024px),
            (-ms-high-contrast: active) and (min-width:992px) and (max-width:1024px) {}

所以您可以使用两个 IE 特定的媒体查询来解决这个问题。

正文在 IE 上是紫色的。

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background: purple;
            }
        }

如果宽度在 1024 到 992 像素之间，正文在 IE 上显示为红色。

        @media  all and (-ms-high-contrast: none) and (max-width:1024px)  and (min-width:992px),
        (-ms-high-contrast: active) and (min-width:992px)   and (max-width:1024px) {
            body {
                background: red;
            }
        }

仅供参考：

你可以nest media-query, but IE 11 does not suppport it.

Answer 3

谢谢大家。我自己解决了我的问题，这是因为与自定义 css 和 bootstrap css

冲突

如何将分辨率与仅针对 IE 11 或更高版本的媒体查询相结合？

How to combine resolution with media query targeting IE 11 or above only?

javascript

css

media-queries

备注

正文在 IE 上是紫色的。

如果宽度在 1024 到 992 像素之间，正文在 IE 上显示为红色。

仅供参考：