Why a site might break in IE9 or IE8

Posted March 29th, 2011 in Applications

Internet Explorer 9 was released a few days ago and I read an interesting post over at Six Revisions titled "Why IE9 is a Web Designer’s Nightmare". Although I haven't used it much (only for testing), I haven't had any issues with the few sites I've tested in IE9. This post looks at an issue which may potentially cause a web designer issues using IE9 and IE8, and it's nothing to do with IE9 itself.

When IE8 was released...

When IE8 was released I had some issues with some of the websites I managed and usually "solved" those issues by using the compatibility flags to make them render using an IE7 engine. From memory, I only had to do this for two sites, one of which has since been redeveloped and I no longer manage the other one.

The compatibility flag looked like this:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Will that cause issues for rendering in IE9? I don't know, but I shouldn't think so.

After IE8 was released I found I never had to code any workarounds for it and usually only had to do fixups for IE6 and very occasionally IE7.

When IE9 was released...

When IE9 was released I'd been designing all my websites and testing them against IE6, IE7 and IE8 (as well as all the other browsers) and when looking at those sites in IE9 I didn't see any issues at all. So I'm inclined to think if something isn't working correctly then something's up with the HTML or CSS behind the site.

Internet Explorer's Conditional Comments

Internet Explorer has a set of well known conditional comments which allow code to be displayed for particular versions of IE and no other browser, and for all browsers other than IE.

Web developers often use these for including additional stylesheets into a web page for specific versions of IE. I used to do this myself but these days generally just do a * html hack for IE6 or the *hack for IE6 and 7 and don't generally have issues with other versions of IE.

Why a site might break

Finally, to the point of this post, why a site might break in IE9 for no apparant reason.

For one reason or other a few days ago I was viewing the HTML source of a particular website and I noticed a style sheet inclusion that looked something like this, after the rest of the stylesheets that all browsers would use:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/assets/css/ie.css" />
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/assets/css/ie6.css" />
<![endif]-->

The first style sheet listed is included for all versions of IE and the second for IE6 only.

Let me highlight that point again: some CSS restyling has been applied for all versions of IE.

The developers have made some assumptions that the "fixes" they are making for IE7+ will be required for all future revisions of IE.

My thoughts

Given Internet Explorer's patchy history this may not necessarily be a bad assumption to make, but it may very well be the reason your site which rendered perfectly in IE6, IE7 and IE8 suddenly didn't render so well in IE9 (and IE10 whenever that's released).

As I mentioned earlier in this post, I generally haven't found I've needed to workaround IE8 at all and rarely IE7, so blanket restyling for IE isn't generally a good idea. My recommendation would be if you are going to target a specific browser with your stylesheet selection then target the version as well.

Your thoughts

Agree? Disagree? Add your thoughts in the comments section below.