A Guide to IE Compatibility View and X-UA-Compatible

Since Internet Explorer (IE) 8 Microsoft have supported a ‘Compatibility View’, allowing users to view web pages as if they are using a lower version of IE, normally IE 7. It appears in the top right of IE 8, 9 and 10, stating that it will make websites designed for older browsers look better. This has now been hidden in IE 11 (preview) but the functionality still exists through the menu tools.

IE 10 Compatibility View

For me this is where the questions/problems start. What older browsers? Why would new versions of IE not be backwards compatible? If I use this am I going to loose any functionality the new browser offers? Will it look and act exactly the same as when viewed in a native browser it is trying to emulate? Why does this not appear on all websites?

This post will aim to remove all of these uncertainties regarding IE’s Compatibility View and detail how as developers we can control this behaviour using the ‘X-UA-Compatible’ meta tag or header.

Compatibility View

When the default Compatibility View is enabled manually in either IE 8, 9 or 10 by clicking the icon on the address bar, the browser will attempt to behave as if you were in IE 7. When the browser attempts to emulate IE 7 it will:

  1. Use IE 7 Standards mode for standards mode document
  2. Send the IE 7 User agent string
  3. Sets the right internal parameters to process conditional comments as IE 7 would.

The site will be added to the Compatibility List accessed through the tools menu of each browser. It is worth noting that the site is added based on the domain name, excluding any sub domain or URL path, meaning that any site hosted on that domain will be displayed in Compatibility View until removed from this list.

IE 10 Compatibility List

The default setting has Compatibility View enabled for all intranet sites only, with a setting to enable it for all sites. But what does ‘Download updated compatibility lists from Microsoft’ exactly mean? After some research I discovered Microsoft collates a list of high volume sites where users turn on Compatibility View, and this option will download that list and enable Compatibility View automatically when using these sites. If you want to know more the IE Support Team wrote a blog about the list and on the support site there is a description of how it is compiled.

As stated previously Compatibility View handles websites as if opened in a older browser, but it will not behave exactly the same as the native browser. At the release of IE 8 in 2009 a blog post was published on the IE Blog detailing how IE 8 compatibility view was different from native IE 7. The differences are significant, impacting areas such as; CSS rendering, processing of JavaScript functions and properties, and many many more! This behavior has not changed with the subsequent release of IE 9 and 10.

So as developers we want to support as many browsers as possible, with Compatibility View available on your site the number of IE versions has increased by 3. This is a burden on development, testing and to be frank is just completely over the top. The only way to tackle this issue is to be in control of how your site behaves.

X-UA-Compatible

We can control how IE Compatibility View will behave through the use of a meta tag or custom header. Using any of the below options will hide the compatibility view icon from the user and handle the page as dictated.

Meta Tag

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7">

The meta tag has to be placed in the head tag, and can only be preceded by the title. If  you place any other tags such as <style> or <script> before the meta tag it will not recognize your tag and revert to the default behavior.

IIS 7 Custom Header

<system.webServer>
   <httpProtocol>
      <customHeaders>
         <add name="X-UA-Compatible" value="IE=edge" />
      </customHeaders>
   </httpProtocol>
</system.webServer>

A complete list of custom headers has been posted on stack overflow. The possible values that can be used as the value/content are listed below.

  • “IE=edge”
  • “IE=10″
  • “IE=EmulateIE10″
  • “IE=9″
  • “IE=EmulateIE9
  • “IE=8″
  • “IE=EmulateIE8″
  • “IE=7″
  • “IE=EmulateIE7″
  • “IE=5″
  • “chrome=1″ – The browser will use chrome frame if it is  installed and will override any of the settings above (now discontinued)

This tells the browser which version of IE you wish your site to be rendered in. These can be used individually or together. If multiple options are provided the highest one for the active browser will be used. If a single value is provided it will be used, unless it is not available and then the active browsers standard will be used. If you prefix the version number with ‘Emulate’ and have no doc type this implies quirks mode, if you would like more details about the different modes Microsoft have described exactly how each of these behave.

Implementation

On a new site I would always use IE=edge as it will render the site in the newest possible version of IE and remove any uncertainties by hiding the compatibility view icon. However Microsoft does not recommend this and instead suggests just having a HTML 5 doc type, which will force your website into standard mode. The HTML 5 doc type will not hide the compatibility view button and is the reason I still include the meta tag with edge.

For sites that have been active without any X-UA-Compatible defined it is not that simple. Users may have already enabled Compatibility View and may have even been encouraged to use this view until the site supported newer browsers.  You can still provide the X-UA-Compatible information and it will force the page out of Compatibility View and hide the icon. I have recently discovered that it does not completely force the site out of Compatibility View.

Agent String Bug

I have used two indicators to identify if the browser has been forced out of Compatibility View, ‘document.documentMode’ and the content of the agent string.

The JavaScript property ‘document.documentMode’ indicates what IE version is being rendered on screen in IE 8, 9 and 10, it is undefined within IE 7 or lower and any other browsers.

Using these I documented the behavior in the standard mode with Compatibility View on, then with it on prior to adding U-XA-Compatible information, and finally with it off prior to adding  added U-XA-Compatible information.

Agent String Test Results

The results are very concerning when Compatibility View is on prior to implementing the U-XA-Compatible information. It appears that the browser is rendering the page in the active browser version, yet the agent string is still indicating that Compatibility View is on. The user will likely see no difference, but this is a serious issue. This will cause any server side logic that is browser specific to run incorrectly, as well as misreporting in any web server logs. I have not seen this issue reported anywhere else and came up with two solutions.

The first and most simple solution is to manually remove the domain from the Compatibility View List found under Tools, Compatibility View Settings. The agent string will now report correctly. This requires every user that had Compatibility View on to take this action, I think this may be unrealistic.

The second option is to have a page on your site (preferably a login page if you have one) where the meta tag has not been included. We can use ‘document.documentMode’ to see if Compatibility View is on (if it equals 7 it is on) and then display a message to the user informing them that ‘Compatibility View is not supported on this site’, or even block them from taking any action until they turn this off. I went with the option to allow the user to continue but warned them strongly against it, I did this because some users (such as corporate) do not have complete control of the Compatibility View List.

About these ads

16 comments

  1. i have installed IE11 browser.. my web apllication works only IE11 compactability view.. if suppose im working on IE11 standard mode it does not support for some kind of operations.. (ie., cannot properly select dropdownlist values..) how to configure for that??

    1. You will have to investigate why your drop down list does not work in native IE11. A native drop down list will always work.

  2. Thanks for sharing, I had always wondered about the very things you have written about. I use IE11 on all my devices. It is the little things that make a big difference.

  3. i am also facing few issues related to IE 11. In IE11 browser my telerik radcombobox is not working properly. When i am typing text the tet is not displayed instead “X” mark displays in center. When i uncheck the Display intranet sites in compatibility view the racombo box works fine but it created some other issues. Any idea how we can fix this.

    1. So when you are running your site locally it is in compatibility view, as stated un-checking that box makes it run in native browser mode. If you plan on adding the settings I have described here, I would always un-checked the setting and fix the other issues.

  4. DDjomez · · Reply

    Great! Congratulations!

  5. MMonclair · · Reply

    I have a web application whose jQuery methods choke in IE9, when displayed in Compatibility Mode. They work fine in Standards Mode, though. I have added the X-UA-Compatible header to the HTTP response (the site hosting it runs on IIS 7), made an HTML5 DOCTYPE declaration, AND added an X-UA-Compatible meta tag to the section, before any other tags. In the vast majority of cases, it forces the client’s IE9 browser into Standards Mode. However, we are still running into cases of IE9 users whose browsers are displaying the page in Compatibility Mode. Is there anything else I can do to force IE9 in Standards Mode?

    1. That is an interesting/annoying problem. The short answer is there is nothing more you can do to force it out from your end. However I have some ideas.

      Possibly the users that work did not have their browser in CV before adding the header and the others did. This is similar to the agent string issue I detailed above. If the user removes the site from the CV list the problem may go away.

      I have had different behaviour using headers rather than ‘meta’ tags. It is defiantly worth adding the tags and seeing if this fixes the issue.

      Let me know how you get on.

  6. Amol Patil · · Reply

    I display a image text with some relative positions using style and left or right parameter specifying a position
    in IE8 the code works find where the text image is displayed with style right:100 where the end of the text image is displayed at 100 and placing image at right position from 100px
    same code in ie10 and above does not identify the right parameter or ignores it ( no ideas ) but does not place it to right from 100px . instead place the image staring from 100px from right boundry instead placing it to the left ending at 100px from right
    Tried placing to make it run webpage in ie8 compatibility mode but does not have any effect on same.
    any idea?

  7. This is really fascinating, You are an excessively professional blogger.

    I’ve joined your rss feed and stay up for in search of
    extra of your great post. Also, I have shared
    your site in my social networks

  8. You should take part in a contest for one of the finest blogs on the net.
    I most certainly will highly recommend this blog!

    1. Thank you, that is very kind.

  9. how To download modern combat 4 free · · Reply

    Hey! This is my first comment here so I just wanted to give a quick shout out and tell you I
    truly enjoy reading through your articles.
    Can you suggest any other blogs/websites/forums that deal with
    the same topics? Thank you so much!

  10. Thank you. Your note that the meta tag has to go on top of the header without any preceding scripts saved my day!

  11. So I’ve been looking at this meta tag trying to fix my problem for an hour and had given up on it. Your thorough post mentioning where the meta tag had to be placed fixed my problem. The clouds parted. Angels sang. The unicorn made peace with the bigfoot, and all is right with the world.

  12. Hi there, all is going perfectly here and ofcourse every one is sharing data, that’s in fact fine, keep up writing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 119 other followers

%d bloggers like this: