IE支持！在 IE 中解决嵌套媒体查询？

Question

事实是，我的 HTML/CSS 在所有浏览器中看起来都很棒并且响应迅速 - 除了 IE（仅在 IE11 中测试过）。出于某种原因，IE 误读了将文本固定到位的填充，所以我想我会做一个

@media only screen and (max-width: 1200px) {

    /* some css stuff */

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

        /* IE specific CSS within a max-width of 1200px*/
    }
}

以浏览器为目标，效果很好！

问题是使用媒体查询使站点响应（不允许使用Bootstrap或任何其他框架），并且 IE 不支持嵌套媒体查询。

所以现在设计不再响应..

是否有任何我没有想到的解决方法？

Answer 1

重构您的 @media 规则，使它们不嵌套 - 不幸的是，这确实意味着可能会重复一些规则（但是像 Sass 这样的工具（或 T4，如果你紧紧地结合到 Visual Studio) 就是为了这个)。

来自这里：

@media only screen and (max-width: 1200px) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

        /* IE specific CSS within a max-width of 1200px*/
        .ieRule1 {
            color: blue;
        }
    }
}

为此：

@media only screen and (max-width: 1200px) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }
}

@media all and (max-width: 1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }

    .ieRule1 {
        color: blue;
    }
}

IE支持！在 IE 中解决嵌套媒体查询？

IE support! Work around nested media queries in IE?

html

css

internet-explorer

media-queries

responsive

来自这里：

为此：