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;  
        }
      }

出于某种原因，当我改变屏幕的大小时，它并没有“捕捉到”＆＃39;正确的媒体查询。有原因吗？

谢谢

Answer 1

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

通过将screen\0黑客与适当的媒体查询相结合，您不清楚自己要完成的任务。如果你希望IE8总是使用第二个规则，我建议只将该规则复制到一个新的样式表中，并将该样式表隐藏在条件注释中，并从主样式表中丢失screen\0 hacks。

Answer 2

每个条件, screen\0结束时的逗号表示OR。因此，任何屏幕大小都将被两个媒体查询选中并同时应用。您还应该使用max-device-width而不是max-width来提高准确性

改为使用

@media screen (max-device-width: 1510px) {
...
}

等。确保您还在HTML文件的viewport中设置了<head>。

多媒体查询不适用于ie10

2 个答案: