Apply Only to Ie 11 Within Media Query for Screen Size

Apply only to IE 11 within media query for screen size

Use the below css inside the media query

IE 10 and above

_:-ms-lang(x), .ie10up { 
       property:value; 
    }

IE 11 and above

_:-ms-fullscreen, :root .CLASS_NAME { 
       property:value; 
     }

How to combine resolution with media query targeting IE 11 or above only?

Note

Internet Explorer (IE) 11 desktop application will end support for certain operating systems starting June 15, 2022. - Microsoft

Your @media logic is incorrect. Use and (max-width:1024px) and (min-width:992px) with both of the media features.

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

So you can fix this issue using two IE specific media-queries.

Body is purple on IE.

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background: purple;
            }
        }

Body is red on IE if width is between 1024 and 992 pixals.

        @media  all and (-ms-high-contrast: none) and (max-width:1024px)  and (min-width:992px),
        (-ms-high-contrast: active) and (min-width:992px)   and (max-width:1024px) {
            body {
                background: red;
            }
        }

FYI:

You can nest media-query, but IE 11 does not suppport it.

Internet Explorer 11 using media query css

can you try this:

@media all and (max-width: 479px) {
  //mobile CSS
}

with all you are targeting all devices, and not only the desktop version you are now targeting with screen.

For mobile only, you would do this:

@media (max-width: 600px) {
  //mobile CSS
}

IE11 doesn't apply media query

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.

Target IE11 and screen width simultaneously

Try to modify your code as below:

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .scene-info {
            background-color: red;
        }

        @media screen and (-ms-high-contrast: active) and (min-width: 1200px), screen and (-ms-high-contrast: none) and (min-width: 1200px) {
            .scene-info {
                background-color: palegreen;
            }
        }

        @media screen and (-ms-high-contrast: active) and (max-width: 991px), screen and (-ms-high-contrast: none) and (max-width: 991px) {
            .scene-info {
                left: 1px;
                background-color: aqua;
            }
        }
    </style>
</head>
<body>
    <p>This is a reference p.</p>
    <p class="scene-info">This then, is the test itself.</p>
</body>

The output like this:

Sample Image

More detail about css media, please check @media Rule and this article.

Media Query ONLY for IE

just declare it little different and it will work.

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {..}

you had double declaration after comma. tested it in IE11 and it works

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  body {

    background-color: red !important;

  }

}

@supports (-ms-ime-align: auto) {

  body {

    background-color: red !important;

  }

}

<div> HELLO </div>

Apply Only to Ie 11 Within Media Query for Screen Size