Even though Microsoft has explicitly told the world to stop using Internet Explorer 11, many organizations still have a significant enough IE11 user base that they have no choice but to build their products to acquiesce to the aging browser’s idiosyncratic demands.
Whether you are new to the world of building the front-end for Internet Explorer 11 compatibility or you are an old hand who knows their way around all the IE11 pitfalls, read on to learn more about:
- Choosing the right environment for debugging
- Tackling CSS layout issues
- Understanding the IE11 debugger
Armed with these tips, one should be able to quickly solve problems in the instance when a web application works perfectly on everything but IE11.
media attribute on a
<link> element seems the next best thing. Andy Kirk has come up with a few combinations:
Code language: HTML
<!-- Print (Edge doesn't apply to print otherwise) IE 10, 11 Edge Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+ FF 29+ --> <link rel="stylesheet" href="your-stylesheet.css" media=" only print, only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active), only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none), only all and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0), only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) "> <!-- Print (Edge doesn't apply to print otherwise) Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+ FF 47+ --> <link rel="stylesheet" href="your-stylesheet.css" media=" only print, only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none), only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen) ">
See also: Cutting the mustard with only CSS
I’m one of those weirdos who never switched to Chrome from Firefox, and the more marketshare Chrome has gained, the less inclined I am to use it for anything other than testing my sites in. I remember the days when Internet Explorer 6 was the assumed default, and I never want to see that again.
Microsoft might have celebrated the death of Internet Explorer 6, but if Google isn’t careful then it might just resurrect an ugly era of the internet where “works best with Chrome” is a modern nightmare.
If you are using Grid in a very simple way, and positioning items rather than using auto-placement then the fact that grid exists in Internet Explorer from version 10 could turn out very useful. You could certainly use this in order to create a simpler layout for IE10 and up, once Grid is shipped in other browsers.
However be aware that this is going to require some additional testing and work, you are unlikely to be able to simply rely on Autoprefixer to run and do the work for you. For example, if you have used auto placement for any item and then don’t set a position using the -ms properties, that item is going to stack up with any other unpositioned items in the first grid cell.
The good news is that the IE implementation is pretty much frozen in time between IE10, 11 and current versions of Edge (presumably until Edge updates to the new specification). So work you do to implement grid in IE should work in those versions without needing to do different things for different IEs.