IE Compatibility Mode

You work hard on making it look good. You fine-tune your fancy CSS3 features. You know that you did a good job and you feel proud. Until you deliver it to the client

First you don’t understand what they are complaining about. They send you screenshots and it looks totally messed up. No gradients and rounded corners, elements are shifted.

After a while you figure out what is wrong: they are viewing it in “Compatibility mode”. Why does it happen to them and not you? Well, the short answer is that you are viewing the website on your local machine and they view it on an “intranet” (more about it later).

Let’s get back to compatibility mode. What is it? Microsoft invented it when they finally realized that Internet Explorer sucked and they needed to do something about it. So they started to make [cough] improvements [cough]. But the issue was that by that time there were lots of websites built specifically for Internet Explorer without using any web standards. These were mainly corporate sites, intranet sites in particular. And they also happened to be Microsoft’s main target group. They couldn’t just abandon their milk cows so they tried to cheat and hoped that nobody would notice.

The main idea was to try to sniff out those crappy websites and show them the old-fashioned way. Then some genius came to a conclusion that ALL intranet sites were built without following web standards, and a new rule was born in Internet Explorer: “Display intranet sites in Compatibility View”. Do I need to say that this rule is turned on by default?

To find this setting, open IE, press ALT+T, choose “Compatibility View Settings”.

IE Compatibility View Settings

So getting back to why this happens to your clients but not you. You are viewing the website on your local machine, via “file” protocol or on a “localhost”. IE doesn’t trigger compatibility mode because it assumes that you are a developer. A client is accessing the website in a Staging environment that is classified as an “intranet”, hence triggering the compatibility mode. The issue is going to be fixed as soon as the website becomes public, but for some reason this doesn’t make the client happier…

So what are your options at this point?

Option 1: Tell them to turn it off

You can ask the client to turn off the option “Display intranet sites in Compatibility View”. The problem here is that every person needs to do this manually on their machines. Not good.

Option 2: Add a <meta /> tag in your HTML

<p><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

The problem with this option is that IE tends to ignore it. You probably already have this line of code in your HTML and it doesn’t help.

Option 3: Same as option 2 but set it in response headers

This requires some backend programming, but this seems to work in cases when the second option doesn’t. The good news is that the fix is really simple: only one line of code. For example, in .net:

protected void Page_Load(object sender, EventArgs e)
{
    Response.Headers.Add("X-UA-Compatible", "IE=edge,chrome=1");
}

The exact implementation differs slightly between different IIS/.NET versions, so find out what applies to your particular website. If the above example doesn’t work, try

Response.AddHeader("X-UA-Compatible", "IE=edge,chrome=1");

Leave a Reply

Your email address will not be published. Required fields are marked *