standards

Internet Explorer 8 comes with two different rendering engines. “Standards Mode” (they use the term loosely) and “Compatibility Mode”. I’m not going to debate the reasoning behind their choice to ship the browser in this form, smarter people than I have already beaten that horse to death. The problem I have with it is that by default IE ships with a setting that makes anything on your LAN show up in compatibility mode. The button to switch to standards mode isn’t displayed, and worst of all, there is nothing that tells you it is IN compatibility mode.

I recently discovered this when, after carefully testing a site in Internet Explorers 6, 7 and 8, I committed the release to the SVN repo and published it to the staging server. A quick test showed IE8 issues that weren’t there on my local version. Turns out the problem was this default compatibility mode setting. You can turn it off by going to “Tools > Compatibility View Settings” and unchecking the “Display intranet sites in Compatibility View” option. They did this to ensure old intranets are compatible with IE8 out the box, but in the process put every web designer in the awkward position of not knowing their site is broken until they upload.

Internet Explorer 8 isn’t all that bad. It does a pretty good job of fixing the (not so) little things that drove us crazy in previous incarnations, but it’s far from perfect. In the very likely event that you need to code some IE8 specific styles I recommend using conditional comments. In this case I needed one set of modifications for IE6, 7 and compatibility mode 8 (which mostly behaves like IE7) and another for IE8 specifically. To achieve this I used the following code:

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

It uses one stylesheet for everything less than 7 and another for IE8 specifically. Works like a charm, hopefully until IE9 comes along.