css - 仅针对 ie 的媒体查询

Question

我又变怪了。

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

我们不知所措。 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;
        }
    }
}

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