css - 多媒体查询不适用于 ie10

Question

对于我的 css，我有几个针对 ie10 的媒体查询...

    @media screen and (max-width :1510px), screen\0{
      div.jw-menu-3col-sm li a .menuItem {
       padding: 0 12px; 
      }
    }


     @media screen and (min-width :1650px), screen\0{ 
       div.jw-menu-3col-sm li a .menuItem {
         padding: 0 16px;  
        }
      }

出于某种原因，当我更改屏幕大小时，它没有“捕获”正确的媒体查询。有什么原因吗？

Answer 1

IE10 will interpret screen\0 as screen ，这意味着它将它视为有效的媒体查询，并始终根据该查询应用这两个规则，使您的最小/最大宽度媒体查询与 IE 无关。因此，在 IE 中，第二条规则将始终优先于第一条规则。

不清楚您通过将 screen\0 hack 与适当的媒体查询相结合来尝试完成什么。如果您希望 IE8 始终使用第二条规则，我建议将该规则复制到一个新的样式表中并将该样式表隐藏在条件注释中，并从您的主样式表中删除 screen\0 hacks。