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