Code hacks: Internet Explorer Compatibility mode

guess-browserI’ve been developing a site for a national competition to be launched in October and ran into a little difficulty with Internet Explorer. Despite this browser losing ground amongst even the unthinking default user community, it is still sufficiently popular that I needed to look at the problem.

The site is running WordPress on a LAMP server using Konstantin Kovshenin‘s Expound theme. One of the testers noticed the letters “Ski” next to the Home menu item. Mousing over it produces a fleeting grey box to appear top left of the browser window. This turned out to be only visible in IE8, IE9 and IE 10 in “compatibility mode”, a feature of IE that allows the browser to render sites that are broken by IE’s shockingly poor implementation of standards, using a model from an earlier version. It’s what a code monkey might call a Kludge.

SkiThe “Ski” is in fact, the first few letters of “Skip to content”. It is one of several features of the site’s theme implementation which are broken in IE’s compatibility mode.

There are several suggestions in the forums designed to force IE into non-compatibility mode and render the site properly. Most rely on delivering a <Doctype> tag on the very first line, followed immediately by a X-UA-Compatible meta tag. Unless this tag is placed on the line immediately after the Doctype tag, IE ignores it.

I considered trying to knock up a plugin to make this work in some kind of customisable way. Editing the theme’s header.php file seemed doomed to be overwritten on the next update, and branching a child theme felt like too much hard work for such a small fix to accommodate a browser that I personally would like everyone to stop using. Part of me wants all sites to look broken when viewed with IE so as to encourage the masses to make an intelligent choice for once. Let’s not start talking about democracy.

Anyway, a little more digging found a really elegant solution which suited my particular needs from Reza Qorbani, which is to use the .htaccess file to have the Apache server sniff the browser and send the metatag. This is what I finished up with:

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=edge env=best-standards-support

It works a treat. Thanks, Reza!

2 Replies to “Code hacks: Internet Explorer Compatibility mode”

Comments are closed.