Compatibility View in IE11

Internet Explorer has built-in functionality called Compatibility View that can be used to emulate its previous versions. When enabled, Compatibility View will render web pages as if viewed in IE7, although there are ways to target specific versions.

This feature was introduced to help support web applications that were built to work in a specific version of IE. It was intended to allow users to upgrade their browsers (and possibly even their operating systems) without upgrading their legacy applications.

With all that said, it’s worth noting that although Compatibility View may sound like a nice feature, even in the best of lights, it’s still a Band-Aid. Compatibility View can certainly be helpful for users, but it doesn’t address the real issue, which is that there are a lot of sites and applications out there that are in desperate need of updating. And it’s sites like these that hold everyone else back.

Enabling Compatibility View in the Browser

In previous versions of IE, there was a little broken page icon that appeared right in the address bar that users could click to enable Compatibility View.

As far as I can tell, that icon is no longer part of IE11, which makes it a bit harder for users to enable Compatibility View (which is probably a good thing). In IE11, you’ll first need to display the File Menu by pressing the ALT key. Then you’ll find “Compatibility View settings” under “Tools.” This will open a dialog window that allows you to specify certain web sites to render in Compatibility View.

Specifying Browser Version in Code

There are two primary ways that developers can tell the browser to render a web site in a specific version of IE.

1. META tag. By inserting the following code, you are telling IE to render the page in the most recent version of IE:

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

   This can be particularly handy, because it will trump a user’s Compatibility View settings, as well as any HTTP headers.

2. HTTP header. Adding a custom HTTP response header is Microsoft’s preferred implementation, because it gets seen by the browser before the page renders. There are a number of different ways that this can be handled depending on your setup, but here is a code snippet that can be inserted to the web.config file to tell IE to render the page in the latest version:

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

Learn more about your options at Modern.ie.

Developer Tools

In addition, IE has a feature that’s part of their Developer Tools (F12) that allows you to change the Document Mode and render the current page in an older version of IE. This is great option for web developers for some quick testing, but remember that the emulators are not the same as actually using older versions of the browser. I like to use this feature to conduct my initial testing and then double-check in Virtual Machines. You can get free VMs from Modern.ie for testing purposes.

One of the great additions to IE11’s overhauled Developer Tools is something that I just noticed the other day. If the Document Mode has been changed in any way, whether it be via Compatibility View settings, Meta tag, HTTP header, or Developer Tools, it will be specified right below the dropdown.

A Little Warning

I can’t end this post without putting a warning out there. Just because there are ways to force IE to emulate previous versions doesn’t mean that you should! A new web site should look and work best in the newest version of IE and may even lose some formatting and possibly some functionality when Compatibility View is enabled. If your web site doesn’t work correctly in newer versions of IE, then the best solution is most likely to fix it. Please use Compatibility View with caution.