Recently I got an issue notice in one of my client’s site which was only visible in IE10, 11 and Webkit browsers.
The issue was strange and I couldn’t find a correct way to fix the issue. Because I found that IE10 & 11 had a problem in rendering the height and width of an element when applying max-width, so I had to use CSS hack to fix the issue.
==== IE10 and IE11 ====
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
h1{color:red;}
}
==== Webkit Browser Only ====
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1{color:blue;}
}
This hack worked very well for me 🙂
