如何在 css hack/媒体查询中扩展 Internet Explorer？答案

【问题标题】：How to scale internet explorer in css hack/ media query?如何在 css hack/媒体查询中扩展 Internet Explorer？
【发布时间】：2019-09-23 08:22:03
【问题描述】：

我正在使我的网站与 Internet Explorer 兼容。如何在 css hack 中扩展 Internet Explorer 中的网站？

首先，我为 Firefox 编写了网站。这就是为什么我对某些浏览器使用了一些 css hack。现在我想开始在不同的浏览器中扩展网站，我从 Internet Explorer 开始。我使用 css hack 的媒体查询来识别 Internet Explorer，但要扩展网站，我需要另一个媒体查询。我已经尝试将媒体查询“添加”到标识 Internet Explorer 的那个，然后我用 600、768 和 998 的 min-width 复制了它，但它只与 min-width: 600px 一起使用并忽略了其他媒体查询.那么是否有另一种方法来扩展（只是！）Internet Explorer 中的网站，还是我编码错误？我对 chrome 也有同样的问题，我没有使用媒体查询，但我仍然没有在那里工作。

/*IE*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    img.Marat {max-width: 13%;margin-left: 62%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
    table.table {margin-top:15%;width:150%;margin-left:-325%;}
    .Abstand4 {margin-left:-130%;}
    img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
    img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}

/*Chrome*/ @supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { 
    img.Marat {max-width: 50%;margin-left: -50%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}  
    table.table {margin-top:15%;width:150%;margin-left:-20%;}
    .Abstand4 {margin-left:-130%;}
    img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
    img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
    }
}

我想在 internet explorer/chrome 中扩展网站，但我不知道该怎么做，因为我必须使用 css hack 来识别网站。

对不起，我的英语不好，感谢您尝试帮助我！

【问题讨论】：

标签： html css internet-explorer media-queries scale

【解决方案1】：

如果你使用多个最小宽度的媒体查询，你应该把最小值放在第一个，最大值放在最后，如下所示：

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /* Set the background color of body to tan */
        body {
            background-color: tan;
        }

        @media screen and (min-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background-color: blue;
            }
        }

        @media screen and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background-color: olive;
            }
        }

        @media screen and (min-width:998px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background-color: aqua;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

按此顺序，媒体查询在 IE10+ 上运行良好。如果顺序错误，下面的媒体查询将不起作用。

在 Chrome 浏览器中，我们也应该遵循这个规则。您可以参考以下代码：

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /* Set the background color of body to tan */
        body {
            background-color: tan;
        }
        @supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
            @media screen and (min-width:600px) {
                body {
                    background-color: blue;
                }
            }


            @media screen and (min-width:768px) {
                body {
                    background-color: olive;
                }
            }

            @media screen and (min-width:998px) {
                body {
                    background-color: aqua;
                }
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

【讨论】：