时间戳

首页 > 解决方案 > 媒体查询在 Internet Explorer 10 中不起作用

css - 媒体查询在 Internet Explorer 10 中不起作用

问题描述

这些媒体查询在除 IE10 之外的其他浏览器中运行良好，在这种情况下我该怎么办？我怎样才能完成这项任务？

@media screen and (max-width: 575.98px){
  .layer-hover .plus, .layer-hover-2 .plus{
    font-size: 2.5rem;
  }
  .layer-hover a, .layer-hover-2 a{
    width: 70%;
    padding: 5px 0;
    font-size: 10px;
  }
}

标签： cssmedia-queries

解决方案

这里有一些关于 Internet Explorer 11 及以下版本的 @media 使用情况的资源。

众所周知，有些人也会成功尝试以下技巧，但 IE10 可能是无情的。注意前缀并查看 CanIUse 知识对象。

@-ms-viewport {
width: device-width;
}

如果这不起作用，您可以尝试screen像这样删除专门针对 IE10 的参数和样式。

根据这篇关于针对 IE10的文章，存在这个小解决方法，因为自 IE10 以来无法识别条件注释。

@media (max-width: 575.98px)[data-useragent*='MSIE 10.0']{
     .layer-hover .plus {
         font-size: 2.5rem;
    }
     layer-hover-2 .plus[data-useragent*='MSIE 10.0'] {
         font-size: 2.5rem;
    }
     .layer-hover a[data-useragent*='MSIE 10.0']{
         width: 70%;
         padding: 5px 0;
         font-size: 10px;
    }
     .layer-hover-2 a[data-useragent*='MSIE 10.0'] {
         width: 70%;
         padding: 5px 0;
         font-size: 10px;
    }
}

Mediacurrent上提到了您可以尝试的另一种可能的黑客攻击，其中有很多成功案例。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE10+ CSS here
}

推荐阅读