IE11 doesn't apply media query

Question

In a p-dialog that have a class, it works fine on Chrome, Firefox and IE Edge but does not work properly in 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>

and this is the media query on my 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;
 }
}

How can I fix this problem?

score 0 · Answer 1 · answered Mar 25 '20 at 01:46

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

}

After testing, the above CSS style applies to IE10+ browser. You could check the following sample:

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

More detail information about using CSS style to detect browser, please check this link: How to target only IE (any version) within a stylesheet?

Besides, please check your code, it seems that you are using the class selector to set CSS style, but in the media section, you don't add CSS style for the "example-dialog" class. Please try to modify it as below.

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

score 0 · Accepted Answer · answered Mar 25 '20 at 11:27

0

In the end I solved it by removing the attribute [appendTo]="'body'". In my case, I don't know why, on the IE DOM I could not see the <p-dialog> and then could not apply the css correctly.

answered Mar 25 '20 at 11:27

travis_911

301
7
19

Congratulation. Perhaps, there has some JavaScript script which will change these elements and re-render the DOM. I suggest you to try to mark your own answer as an accepted answer for this question after 48 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.^_^ – Zhi Lv Mar 26 '20 at 10:28

IE11 doesn't apply media query

2 Answers2