IE11 不应用媒体查询

Question

在有类的p-dialog 中，它在 Chrome、Firefox 和 IE Edge 上运行良好，但在 IE 中无法正常运行

<p-dialog [baseZIndex]="10000" [contentStyle]="{'overflow':'visible'}" responsive="true" modal="true" #noteView
      [(visible)]="displayModal" [appendTo]="'body'" (onShow)="onAfterShow($event)" class="example-dialog">
</p-dialog>

这是我的 css 上的媒体查询

@media all and (min-width: 1024px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 ::ng-deep .example-dialog .ui-dialog {
      width: 60%;
      height: 50%;
      overflow-y: auto;
 }
}

我该如何解决这个问题？

Answer 1

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

}

经测试，上述CSS样式适用于IE10+浏览器。您可以查看以下示例：

<style>
    @media all and (min-width: 1024px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .content {
            width: 100%;
            height: 50%;
            overflow-y: auto;
            background-color: darkseagreen;
        }
    }
</style>
<div class="content">content</div>

更多关于使用CSS样式检测浏览器的详细信息，请查看此链接：How to target only IE (any version) within a stylesheet?

另外，请检查您的代码，您似乎正在使用类选择器来设置 CSS 样式，但是在媒体部分，您没有为“example-dialog”类添加 CSS 样式。请尝试如下修改。

@media all and (min-width: 1024px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .example-dialog {
      width: 60%;
      height: 50%;
      overflow-y: auto;
 }
}

Answer 2

最后我通过删除属性 [appendTo]="'body'" 解决了这个问题。就我而言，我不知道为什么，在 IE DOM 上我看不到 <p-dialog> 然后无法正确应用 css。