Make all your sites work in IE8 with one fell swoop

At work we have around 100 sites hosted for clients, some of which might not have been updated in a few years (I should point out these are sites we develop, so there's no chance a client's going to edit the site themselves). IE8 is going to be rolled out to Windows users with Automatic Updates enabled as of next week, so there's a small worry about auditing these sites in time.

When IE7 came out we had to spend the time going through each of them manually and checking everything was fine. This time around, although IE8 has a new rendering model, it's possible for the browser to render pages as if it was IE7. In general this has been hugely controversial, but for people in our situation it's pretty handy.

The easiest solution to having sites that may not work in the IE8 renderer is 'do nothing'. IE8 has a compatibility button that a user can press that renders the page as if it's IE7. If enough users press this button, a scary centralised Microsoft database marks you as a naughty site and from then on, IE8 users get to see you in 'compatibility mode' until some time in the future when you fix your site and manage to persuade Microsoft that you should be let back in to the halls of the worthy.

However that sounds like a mess, relies on users jumping through some hoops, and might be a bit tricky to get off the list at a later date. The strategy we've decided to go for is to explicitly mark all our sites as needing to be rendered in compatibility view, then turn this off for each site in turn as they're audited, at our leisure.

The solution that Microsoft have provided is a new HTTP header, X-UA-Compatible. The semantics of the header have been defined in a way that allows browsers aside from IE to use it but, frankly, I'll be quite upset if they do.

To mark an HTML page as needing to be rendered in IE7 mode, you'd include the following META tag as the first element in its HEAD, telling it to behave as IE7 would. I've seen some advice online saying the value should be IE=IE7, but that will instruct the browser to use IE7 Standards Mode which isn't ideal. The value I've used here, IE=EmulateIE7 will tell IE8 to use either IE7 Standards Mode or IE7 Quirks Mode based on the page's <!DOCTYPE> using the same algorithm as IE7.

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

So there's one solution - go through all the sites and add that tag to the pages. I don't like it though, for a few reasons:

  1. It's still fairly labour-intensive to open a load of old sites, work out their templating system and add in the markup.
  2. This tag would be invalid in HTML5 and I don't want to get into bad habits.
  3. It feels like the HTML is being cluttered up.

What we've gone with in our setup is to include this instruction as a real HTTP header in our Apache httpd.conf for all sites:

Header set X-UA-Compatible: IE=EmulateIE7

Now, all of our sites in one go should use the compatibility view. Then, as we audit them we can add the following to the VirtualHost for each site:

Header unset X-UA-Compatible
Header set X-UA-Compatible: IE=IE8 ; optional

Once we've tested each site, this will then tell IE8 to render using IE8's engine no matter what the compatibility database says. You could leave off the header completely for sites, of course, but then you'll end up mired in the compatibility database. You would save the slight overhead of having an IE-specific header, though.

Bookmark and Share

Comments

Add a comment