仅对屏幕尺寸为IE 11应用媒体查询。

Question

我目前有以下针对特定宽度的媒体查询。

 @media only screen and (max-width: 1920px) {
    .toggleMultiSelect .filter {
        width: 566px;
    }
 }

但是在IE中，'.toggleMultiSelect .filter'的宽度与Chrome/Firefox不同。因此，需要在1920px下为相同的css类别应用不同的宽度。从Stackoverflow搜索中，我发现可以通过以下方式实现IE特定的行为。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .toggleMultiSelect .filter {
        width: 575px;
    }
}

所以现在我需要实现分辨率和CSS类的双重解决方案。575px 的宽度仅应适用于IE和Chrome，或者FireFox应该使用566px。

提前感谢您的任何帮助。

- Luke

Answer 1

在媒体查询中使用以下 CSS：

IE 10 及以上版本

_:-ms-lang(x), .ie10up { 
       property:value; 
    }

IE 11及以上版本

_:-ms-fullscreen, :root .CLASS_NAME { 
       property:value; 
     }

- Shahil M

---

嗨，Shahil，应该是这样的对吧？ @media only screen and (max-width: 1920px) { _:-ms-fullscreen, :root .ie11up .toggleMultiSelect .filter{ width: 575px; } } 我尝试了这个，但没有成功。 - Luke

@Luke，应该是 _:-ms-fullscreen，:root .toggleMultiSelect .filter { width: 566px; }。 - Shahil M

“_:-ms-lang(x),” 是解决问题的“魔法”术语。".ie10up" 只是误导人的。应该使用“.toggleMultiSelect .filter”来响应所提出的问题。 - Jack Miller

Answer 2

您是否尝试过像这样组合它们 -

@media only screen and (max-width: 1920px) {
    .toggleMultiSelect .filter {
        width: 566px;
    }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
       .toggleMultiSelect .filter {
         width: 575px;
       }
    }

 }

这可能有效，但不确定。我正在使用 Mac ，所以无法测试。但是我认为这对你有用。希望这有帮助。

- Jithin Raj P R

---

嗨weBer，我已经尝试过了。但在IE中仍然应用了566px的宽度。而不是575px。感谢您的回复。 - Luke

当您检查类时，@Luke是第二种样式吗？ 如果是的话，我们可以尝试在样式中使用！important。 - Jithin Raj P R

添加重要性也没有起作用。感谢您的帮助。谢谢。 - Luke