Question

我正在尝试将IE10 +特定媒体查询与最大宽度分页点组合在一起。

我很确定他们可以合并，但我不知道该怎么做。

以下是原始IE10 +仅css媒体查询：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS styles go here */
   }

这是我将他们结合起来的微弱尝试：

@media (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (max-width: 950px) {
    /* IE10+ CSS styles go here */ 
    }

这里的IE唯一代码工作正常，但“max-width”根本不起作用。

感谢您的帮助！

Answer 1

如果您这样做，它会起作用：重复媒体查询选择器的所有部分。

.For.IE.only {
  display: none
}

@media all and (-ms-high-contrast: active) and (max-width: 950px),
       all and (-ms-high-contrast: none) and (max-width: 950px) {
  .For.IE.only {
    display: block
  }
}

<div class="For IE only">
  This is for IE only, and only on narrow screens
</div>
<div>
  This is for all browsers
</div>

免责声明：我这里没有IE10，只有IE11，但我有理由相信它也适用于IE10。

Internet Explorer 10+媒体查询和响应断点

1 个答案: