如何创建一个unnested IE11媒体查询？

Question

我试图在我的网格站点中支持IE11，并且我在一个媒体查询中有-ms网格代码。我想只在大于767px的屏幕上激活-ms-grid。

这有效：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){

我将在IE11中获取-ms-grid代码，并且仅在IE11中，但这不起作用：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (min-width:767px){

当我调整屏幕大小时它没有关闭..我尝试了一些不同的变体，我在媒体查询上相当不错，所以我希望你能发现一些关闭的东西..

Answer 1

现在我已经测试了所有内容，支持网格/ -ms-grid / no-grid，我发现最好的方法是：

1. 创建无网格的移动友好型html5网站

2. 通过执行以下操作支持Internet Explorer 11：

   @media screen and (min-width: 767px){
       *::-ms-backdrop,.example{
           display: -ms-grid;
       }
   }
   

3. 支持＆＃34;显示：网格;＆＃34;已启用浏览器：

   @media only screen and (min-width: 767px){
       @supports (display: grid){
           .example{
               display: grid;
           }
       }
   }
   

请记住确保代码按此顺序排列，因为Edge仍然会读取旧的网格代码。