同时针对 IE11 和屏幕宽度

Question

我需要针对 IE11 以及特定断点，因为有些东西在 IE11 上无法正常工作。我知道 CSS 我需要进行编辑，但我无法找出同时正确定位 IE 和屏幕尺寸的媒体查询。

我尝试了下面的代码和每个代码的多种变体。

我的问题是这里出了什么问题，我该如何解决它才能正常工作？

@media screen and (-ms-high-contrast: active) and (min-width: 1200px),
       screen and (-ms-high-contrast: none) and (min-width: 1200px) {
          .scene-info {
               CSS GOES HERE
       }
}


@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none), screen and (max-width: 991px) {
       .scene-info {
            left: 1px;   
       }
}

Answer 1

尝试修改您的代码如下：

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .scene-info {
            background-color: red;
        }

        @media screen and (-ms-high-contrast: active) and (min-width: 1200px), screen and (-ms-high-contrast: none) and (min-width: 1200px) {
            .scene-info {
                background-color: palegreen;
            }
        }

        @media screen and (-ms-high-contrast: active) and (max-width: 991px), screen and (-ms-high-contrast: none) and (max-width: 991px) {
            .scene-info {
                left: 1px;
                background-color: aqua;
            }
        }
    </style>
</head>
<body>
    <p>This is a reference p.</p>
    <p class="scene-info">This then, is the test itself.</p>
</body>

输出如下：

有关 css 媒体的更多详细信息，请查看 @media Rule and this article。

同时针对 IE11 和屏幕宽度

Target IE11 and screen width simultaneously

css

media-queries

internet-explorer-11