Meta X to IE’s Rescue

Compatibilitiy between browsers is always a major issue when developing websites, any web developer should tell you that. The more browsers you want to support, the number of hacks or tricks seems to grow exponentially. There’s always a trade off between development time and number of browsers you want to reach.

One of the compatibility issues that I came across today, and know I could have used in previous projects, was that of IE’s Compatibility and Quirks mode. A site was working in all modern browsers but only in IE if you specifically told it to run in the latest modes. By default the IE browsers were running in Quirks mode, a backwards compatibility mode that is meant to make things better, rather than worse. While quirks mode was running, several layout and padding bugs were appearing.

I knew that you could tell the HTTP service (Apache, IIS etc) to reply to requests and inform the browser to run in a certain mode, shifting them away from quirks mode, but only if you had access to the services config. In this scenario I didn’t.

The fix… quite simply but this in the documents header:

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

This tells IE browsers to run the page through the most recent stable renderer they have, so no more quirks mode.

This is probably one of many ways to achieve this mode, and hopefully you shouldn’t need to use it in many circumstances, but thought I’d through it out there.