Question

是的，我又很奇怪了。

我们的团队正在尝试添加一些样式，即只调整一些放在图像上的文本。然而，第一个ms-high-contrast可以正常工作，但以下所有媒体查询都会失败。有更好的更有说服力的方法吗？

我们不知所措。怎么了？

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

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

Answer 2

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

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

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

媒体查询仅适用于

2 个答案: