css - Apply only to IE 11 within media query for screen size

Question

I currently have following width specific media query.

 @media only screen and (max-width: 1920px) {
    .toggleMultiSelect .filter {
        width: 566px;
    }
 }

But the width for '.toggleMultiSelect .filter' changes in IE from Chrome/Firefox. So basically need to apply different width for the same css class in 1920px for IE. From the Stackoverflow search I found that IE specific behavior can be achieved like below.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .toggleMultiSelect .filter {
        width: 575px;
    }
}

So now I need to achieve both resolution and css class. 575px width only should apply to IE and Chrome or firefox should get 566px.

Thanks in advance for any help.

Answer 1

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