IE11 不应用媒体查询

Question

在具有 class 的 p-dialog 中，它在 Chrome、Firefox 和 IE Edge 上工作正常，但在 IE<=11 中无法正常工作。

<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 样式检测浏览器的更多详细信息，请查看此 link：

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

@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。

IE11 不应用媒体查询

IE11 doesn't apply media query

css

internet-explorer

angular