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之类的工具（如果您精通Visual Studio，则为T4）是为此而设计的。）

从此：

@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中的嵌套媒体查询？

1 个答案:

从此：

对此：