IE浏览器中CSS媒体查询嵌套失效问题求助

这问题我碰到过！原因很简单：IE10及以上版本并不支持CSS媒体查询嵌套（这是Media Queries Level 4的新特性，老IE完全不兼容），所以你把IE专属的媒体查询嵌套在设备宽度查询里时，IE根本解析不了这个嵌套结构，自然不会应用里面的样式。

正确的写法：合并媒体查询 #

你需要把两个媒体查询的条件用and合并成一个，这样IE就能正常识别了：

@media only screen and (min-device-width: 992px) and (-ms-high-contrast: none),
       only screen and (min-device-width: 992px) and (-ms-high-contrast: active) {
  .shape{ 
    margin-top: -70px!important; 
  }
}

为什么这样可行？ #

IE支持单个媒体查询里的多条件组合，我们把设备宽度条件和IE专属的高对比度条件通过and结合，同时覆盖(-ms-high-contrast: none)和(-ms-high-contrast: active)两种情况，这样就能精准命中992px以上设备宽度的IE浏览器，样式也会正常生效。

如果你的项目还需要兼容更老的IE（比如IE9及以下），那可能需要额外用HTML条件注释来单独加载样式，但从你原来的代码来看，你针对的是支持-ms-high-contrast的IE版本，上面的合并写法完全够用。

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