如何编写仅针对IE10的媒体查询？现有查询同时覆盖IE10与IE11

当然有办法实现仅针对IE10的媒体查询！虽然IE10和IE11共享部分媒体查询特性，但我们可以利用版本间的特性差异精准定位IE10，下面是具体的实现方案：

核心思路：利用IE版本特性差异 #

IE10和IE11都支持(-ms-high-contrast: active)与(-ms-high-contrast: none)这两个媒体查询条件，但IE11支持@supports规则，而IE10完全不支持。我们可以借助这个差异实现精准区分。

方法1：媒体查询 + @supports 排除法 #

先针对IE10+（含IE11）应用基础样式，再通过@supports排除IE11及现代浏览器，只保留IE10的目标样式：

/* 第一步：匹配IE10和IE11的媒体查询 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .target-element {
    /* IE10需要的样式 */
    padding: 10px;
    background-color: #ff4444;
  }
}

/* 第二步：排除支持@supports的浏览器（IE11+、现代浏览器） */
@supports (margin: 0) { /* 选一个所有现代浏览器都支持的简单属性 */
  .target-element {
    /* 恢复默认或设置其他浏览器的样式 */
    padding: initial;
    background-color: initial;
  }
}

方法2：IE10专属媒体查询hack #

还有一个更简洁的媒体查询写法，仅对IE10生效，依赖IE10特有的解析逻辑：

@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
  /* 这里的样式仅IE10会应用 */
  .target-element {
    border: 2px solid #2196f3;
  }
}

注意：这个hack利用了IE10对媒体查询中\0转义字符的解析特性，IE11和其他现代浏览器不会识别该条件。

补充：属性级IE10 hack #

如果不需要完整的媒体查询，只是想给单个CSS属性单独针对IE10，可直接使用\0后缀：

.target-element {
  /* 其他浏览器的样式 */
  color: #333;
  /* 仅IE10识别的样式 */
  color: #009688\0;
}

验证技巧 #

可以通过IE10开发者工具（按F12切换到IE10模式）确认样式生效，同时在IE11、Chrome或Firefox中验证样式不会被应用。

内容的提问来源于stack exchange，提问作者dagda1