仅针对 ie 的媒体查询答案

【问题标题】：Media queries for ie only仅针对 ie 的媒体查询
【发布时间】：2017-11-28 22:45:05
【问题描述】：

我又变得奇怪了。

我们的团队正在尝试为 ie 添加一些样式，以便调整位于图像上的某些文本的大小。第一个 ms-high-contrast 有效，但是以下所有媒体查询都失败了。有没有更好更雄辩的方法来做到这一点？

我们不知所措。 ie怎么了？

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .homebox .mdlogolg{
        left: -60px;
    }
    @media (max-width: 1199px) and (min-width: 992px) {
        .homebox .mdlogolg{
            left: -60px;
        }
    }
    @media (max-width: 991px) and (min-width: 768px) {
        .homebox .mdlogolg{
            left: -36px;
        }
    }
    @media (max-width: 767px) {
        .homebox .mdlogolg{
            left: -25px;
        }
    }
}

【问题讨论】：

尝试取消嵌套查询：stackoverflow.com/questions/7668301/…
@Lucas 但它只能用于 ie。
您可以在子查询中添加 ie only 查询，使用“and”，请参阅我的链接中的答案以获取示例
@Lucas，已经试过了。即不会处理它们
参考这个小提琴：jsfiddle.net/0kc3dbmL/2

标签： css internet-explorer

【解决方案1】：

您可以通过分离这些媒体查询来实现上述目的（因为嵌套不起作用）。试试下面的代码...

@media (max-width: 1199px) and (min-width: 992px) and (-ms-high-contrast: none), (max-width: 1199px) and (min-width: 992px) and (-ms-high-contrast: active) {
    .homebox .mdlogolg{
        left: -60px;
    }
}
@media (max-width: 991px) and (min-width: 768px) and (-ms-high-contrast: none), (max-width: 991px) and (min-width: 768px) and (-ms-high-contrast: active) {
    .homebox .mdlogolg{
        left: -36px;
    }
}
@media (max-width: 767px) and (-ms-high-contrast: none), (max-width: 767px) and (-ms-high-contrast: active) {
    .homebox .mdlogolg{
        left: -25px;
    }
}

【讨论】：

【解决方案2】：

实际上，IE 没有媒体查询，但是您可以为 IE 创建具有所有属性的单独样式表，如果是 IE，他将自动应用。

<head>
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
    <![endif]-->
</head>

This article 可能会对您有所帮助。另外，您可以在Bootstrap 的code example 上观看他们为支持IE 而发明的内容。

【讨论】：