时间戳

首页 > 解决方案 > IE11 不应用媒体查询

css - IE11 不应用媒体查询

问题描述

在一个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;
 }
}

我该如何解决这个问题？

标签： cssangularinternet-explorer

解决方案

@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;
 }
}

推荐阅读