Dealing with IE


What's the problem?

Internet Explorer plays a vital role in web-development. IE is one of the most popular web-browsers, mainly due to the fact that Microsoft ship IE with their operating systems. It is prudent to know what versions of IE people are using; as every release appears to be so different to the last. Currently (as of November 2012) IE9.0 seems to be the most widely used browser. IE9.0 does "support" HTML5 to a degree, and it does offer some CSS3 support also. However IE8.0 (Shipped with Windows 7) does not. This means that anyone who has disabled Windows Updates on their Windows 7 machine, is likely still running IE8.0. See this article for browser usage stats.

Why is this a problem?

These days, web-browsers try to follow one set of standards; governed by the W3C. There are always going to be compliance issues between competitors, but for the most-part all modern web-browsers render virtually the same. However back in the days of IE 4, 5 & 6, there were no web-standards. Microsoft (and others) had to develop their own solutions. While most modern browser developers (Firefox, Chrome, Opera ect...) are downloaded by users; and therefore able to offer updated versions on a permanent bases, Internet Explorer is supplied with Windows. So while the W3C were busy setting the standards, Microsoft was shipping Windows with their own browser pre-installed.

Unfortunately, Microsoft had the upper-hand with browsers due to Windows. So when the W3C tried to standardise the web and declare IE as obsolete, people complained. IE 4 & 5 support these days is virtually non-existent. IE 6 however (shipped with Windows XP), simply refuses to die. For this reason, most web-developers will try to make their designs "backwards compatible" as much as possible, by including IE version specific stylesheets, using CSS hacks that are only detectable by specific versions IE, or by including special JavaScript to perform the functions that older IE versions cannot.

Working with conditional comments

Conditional comments are conditional statements used in HTML that only IE recognises. They can be used to hide or display content in Internet Explorer only. Conditional comments were introduced in IE 5, and are used in all following versions up-to version 9. Microsoft has announced support for conditional comments has dropped in IE 10 when processing HTML5 pages, but will still work on older websites.

Example

There are two types of conditional comments; Downlevel-hidden, and Downlevel-revealed. Downlevel-hidden is used by IE to hide or show content. Downlevel-revealed conditional comments are regarded as HTML comments by all non-IE browsers, and therefore ignored.

				Downlevel-hidden (only IE will use this)
<!--[if IE 6]>
<p>You are using Internet Explorer version 6.</p>
<![endif]-->

Downlevel-revealed (all other browsers ignore the tags and process the data inside them)
<!--[if !IE]><!-->
<p>You are not using Internet Explorer.</p>
<!--<![endif]-->

Targeting IE with conditional comments

				All versions of IE
<!--[if IE]>
your HTML here
<![endif]-->

IE 6 Only
<!--[if IE 6]>
your HTML here
<![endif]-->

IE 7 Only
<!--[if IE 7]>
your HTML here
<![endif]-->

IE 8 Only
<!--[if IE 8]>
your HTML here
<![endif]-->

IE 9 Only
<!--[if IE 9]>
your HTML here
<![endif]-->

IE 8 or Higher
<!--[if gte IE 8]>
your HTML here
<![endif]-->

Lower than IE 9
<!--[if lt IE 9]>
your HTML here
<![endif]-->

IE 7 or Lower
<!--[if lte IE 7]>
your HTML here
<![endif]-->

Greater than IE 6
<!--[if gt IE 6]>
your HTML here
<![endif]-->

Not IE
<!--[if !IE]><!-->
your HTML here
<!--<![endif]-->


Microsoft suggest using the syntax below for non-IE conditional comments [1]. Be warned however, this method is not W3C standards compliant:

				Not IE
<!--[if !IE]>
your HTML here
<![endif]-->


Microsoft acknowledges the syntax used above is not standardized markup, intending these tags to be overlooked by other browsers and expose the content in the middle. In-order to ensure compliance with W3C standards, use the following syntax instead:

				Not IE
<!--[if !IE]><!-->
your HTML here
<!--<![endif]-->


You can load IE specific stylesheets using the same method, other browsers will use the non-IE stylesheet.

				<!--[if !IE]><!--><link href="/style.css" rel="stylesheet" /><!--<![endif]-->
<!--[if IE]><link href="/iestyle.css" rel="stylesheet" /><![endif]-->

Working with CSS hacks

I do not recommend using CSS hacks extensively in your stylesheets, instead provide alternative stylesheets using conditional comments. However for minor fixes such as margins, padding, overflow ect... they can be a quick solution. I have complied a list of some widely used CSS hacks below. Note that these hacks work by taking advantage of bugs / glitches present in different versions of IE, so they are by no-means official.

IE 10

					@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div {
color:red; /* Warning: this will likely also work in IE 11. */
}
}

IE 9 & 10

					@media screen and (min-width:0\0) {
color:green\9;
}

IE 9

					:root div {
color:blue\9; /* Does not work for background or font- */
}

IE 8 & 7

					color:red\9;

IE 8 Only

					color:green \0/; /* Note the space before the \0/ ...may effect Opera without it. */
					@media \0screen {
div {
color:blue;
}
}
/* This method supersedes the one above, and is usually the better option. */

IE 7 & Below

					*color:red;

IE 7 Only

					*+html div {
color:green;
}

Non-IE 7 Only

					_color:blue;

IE 6 Only

					* html div {
color:red;
}

Hide from IE6 or Lower

					color/**/:red;
					html > body div {
color:green;
}

I have provided a demo page for you to test these hacks yourself.

Below is a selection of screenshots demonstrating the hacks working from IE versions 6-10 (click to enlarge).

Working with pseudo selectors

Pseudo selectors are a great way to add special effects to some CSS selectors. However older versions of IE have had little support for them. IE 6 only supports the use of the hover pseudo selector on anchor links, as shown below:

				a:hover {color:#FF00FF;} /* mouse over link */

These days however, pseudo selectors are widely used on list-items, div containers, images, even some dropdown menus like the Suckerfish pure CSS menu rely on pseudo selectors.

While IE 7 did introduce more support and allow pseudo selectors to become more useful, support was limited, and often very buggy. IE 8 wasn't much of an improvement, with slightly more support and some of the bugs worked-out. It was only with the release of IE 9 Preview that full use of pseudo selectors became available. Special selectors like nth-child & last-of-type; could finally be used without having to fall-back to JavaScript.

Unfortunately, web developers do not have the benefit of presuming that their website viewers will be using the latest browser. So how do we maintain compatibility? There is one quick & easy solution available; Selectivizr. All you need to do is include selectivizr.js in the head of your site, along with one of several compatible JavaScript libraries, and Selectivizr does the rest.

Download Selectivizr

Example usage:

				<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

This will only effect IE versions 6-8, as IE 9 has native support. If your design relies heavily on pseudo selectors, I recommend including a fall-back stylesheet within the noscript tags (above).

Article Updated: Tue 21st Nov 2017