仅适用于屏幕尺寸媒体查询中的 IE 11

Question

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

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

但是“.toggleMultiSelect .filter”的宽度在 IE 中从 Chrome/Firefox 改变了。所以基本上需要为 IE 的 1920px 中相同的 css class 应用不同的宽度。从 Whosebug 搜索中，我发现 IE 的特定行为可以像下面这样实现。

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

所以现在我需要同时实现分辨率和css class。 575px 宽度应仅适用于 IE，Chrome 或 firefox 应为 566px.

在此先感谢您的帮助。

Answer 1

你试过这样组合它们吗 -

@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所以无法测试，但我认为这对你有用。希望这对您有所帮助。

Answer 2

在媒体查询中使用下面的 css

IE 10 及以上

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

IE 11 及以上

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

仅适用于屏幕尺寸媒体查询中的 IE 11

Apply only to IE 11 within media query for screen size

css

media-queries

internet-explorer-11