Apply only to IE 11 within media query for screen size

问题

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.

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

回答2:

Did you try combining them like this -

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

 }

This may work am Not sure, am using Mac so no way to test, But I think this will work for you. Hope this was helpful.

来源：https://stackoverflow.com/questions/45973976/apply-only-to-ie-11-within-media-query-for-screen-size