Pesky Internet Explorer

Jamie Johnson
Author of Velocity: The Basics: Scripting with a $ here and a # to do, Web Developer and former Computing Support Analyst and Licensed Professional Counselor

September 12, 2014 (updated February 20, 2015)

Internet Explore (IE) has been the web developer's bane for years. While IE 10 went with better standards and Mozilla, it still has discrepancies with Firefox and other standards-compliant browsers. Before IE 10, one could use conditional IE statements to affect what IE did:

Or one could use what I call "starmasking" in CSS. This is where one prepends a CSS property with an asterisk (*) where a "starmasked" rule overrides the aforementioned property in older versions of IE. For example:

<style type="text/css"> h2#iestinx { display: none; *display: block; } </style>

Don't use Internet Explorer.... "It's a Trap!"

This worked well for IE versions prior to 10. However, these do not work for IE 10 and later versions of IE. So, we turn to our friend JavaScript. To see what your browser's User Agent string is (how the browser is detected), you can do the following in JavaScript:

alert(navigator.userAgent);

This is helpful in finding out how your browser is detected as even IE 10 and IE 11 are detected differently. In classic IE, the string MSIE is in the User Agent string while the string is not in IE 11's User Agent string. However, the string like Gecko does show up in IE 11's User Agent string (I know, convenient). So, what I do in JavaScript is detect for both and act accordingly while preventing detection of Chrome since it has "like Gecko" in its User Agent string:

<script type="text/JavaScript" language="JavaScript"> if((navigator.userAgent.toString().indexOf('Safari')==-1)&&(navigator.userAgent.toString().indexOf('Chrome')==-1)&&((navigator.userAgent.toString().indexOf('MSIE')!=-1)||(navigator.userAgent.toString().indexOf('like Gecko')!=-1))){ document.getElementById('iesux').style.display="block"; } </script>

Or use jQuery:

Now you can handle all versions of IE.

January 18, 2019, Update!
IE10+ or IE11-only CSS!

At https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11, Paul Sweatte shows CSS-only rules for IE10+ as well as for IE11 only.

Here's the code:

/* The below thanks to https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11 */
@media all and (-ms-high-contrast:none) {
	/* IE10+ CSS styles go here */
	.pdashed {
		border-bottom: 1px dashed black;
	}
	/* IE11 */
	*::-ms-backdrop, .pdashed {
		background: yellow;
	}
}

So, in IE10 and above, this sentence will have a dashed underline. In IE11 only, this sentence will be highlighted yellow.

tech @ Beacon Deacon

Pesky Internet Explorer

Don't use Internet Explorer.... "It's a Trap!"

January 18, 2019, Update!IE10+ or IE11-only CSS!

January 18, 2019, Update!
IE10+ or IE11-only CSS!