在媒体查询中仅对IE 11应用屏幕大小

Luk*_*uke 10 css media-queries internet-explorer-11

我目前有以下宽度特定的媒体查询.

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

但" .toggleMultiSelect .filter " 的宽度在IE中从Chrome/Firefox发生了变化.所以基本上需要在1920px中为IE使用相同css类的不同宽度.从Stackoverflow搜索我发现IE特定的行为可以像下面这样实现.

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

所以现在我需要实现分辨率和css类.575px宽度仅适用于IE和Chrome或firefox应该获得566px.

在此先感谢您的帮助.

Sha*_*l M 16

在媒体查询中使用以下css

IE 10及以上版本

_:-ms-lang(x), .ie10up { 
       property:value; 
    }
Run Code Online (Sandbox Code Playgroud)

IE 11及以上版本

_:-ms-fullscreen, :root .CLASS_NAME { 
       property:value; 
     }
Run Code Online (Sandbox Code Playgroud)

  • `_:-ms-lang(x)`,这个解决问题的“神奇”术语。`.ie10up` 只是误导性的。它应该是`.toggleMultiSelect .filter`来响应所提出的问题。 (2认同)

weB*_*Ber 5

你有没有尝试像这样组合它们 -

@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;
       }
    }

 }
Run Code Online (Sandbox Code Playgroud)

这可能工作时肯定的是,现在用Mac所以没办法测试,但我认为这会为你工作。希望这是有帮助的。