【问题标题】:IE11 doesn't apply media queryIE11 不应用媒体查询
【发布时间】:2020-03-25 19:27:23
【问题描述】:

在有类的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;
 }
}

我该如何解决这个问题?

【问题讨论】:

    标签: css angular internet-explorer


    【解决方案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;
     }
    }
    

    【讨论】:

      【解决方案2】:

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

      【讨论】:

      • 恭喜。也许,有一些 JavaScript 脚本会改变这些元素并重新渲染 DOM。我建议您在 48 小时后尝试将您自己的答案标记为该问题的可接受答案,此时该答案可以标记。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。^_^
      猜你喜欢
      • 1970-01-01
      • 2017-06-18
      • 2018-04-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-06-18
      • 1970-01-01
      相关资源
      最近更新 更多