IE compatibility modes

Hello,

Let me start by saying, I'm no expert in web applications and browsers, however I have run into HTML compatibility issues on and off for many years.  For those that were developing sites way back in the day when the internet was just starting to be something that people were adopting in the home, you may remember having to write javascript to detect the browser version to see what little nuances were going to work for Netscape and what would work for Internet Explorer.  Now that browser technology is even more all-over-the-place with additional players in the browser field, and a wide range of versions for each.  With IE specifically, you may see anything from IE7 to the latest...if not even older.  Later versions of IE (I believe starting with IE8) have various options in them for compatibility.  Certain websites may fail to work correctly in one version of IE, while they work fine in another.  Newer versions of the browser have the F12 debugging tools, which makes it easy to test sites with.  Whenever you have IE open, you can hit the F12 key and you will get a popup window with various tools for website debugging.  Along the menu bar, the last two items on the right site are browser mode and document mode.  In each, you can see a list of versions that you want to display with.

Typically your pages will load at whatever settings you had it at the last time you set it.  However there are some places that can override these.

#1 Group policy.
In both user and computer settings -> Administrative Templates -> Windows Components -> Internet Explorer -> Compatibility View, you will see a list of settings

In this list we can see various options.  Some allow you to provide a list of domain names.  So if you put: contoso.com in there, anything in the whole contoso.com namespace (ie: www.contoso.com, myapp.contoso.com) will all be effected.  Looking through the details will help you decide what may be needed.  The last two options allow lists of sites to be defined.  These settings will effect the Document Mode option in the compatibility functions.  Changing it to IE7 will break HTML5 and newer technologies not supported.

#2 Controlled by the site via META Tags
The X-UA-Compatible meta tag is something you can define in your application. In this article, you can view the allowed values. From my basic testing with this, using the Emulate values seems to force the browser to use that mode. While the others seem to be guidelines which may be ignored if higher version level functionality is implemented in the site. In my case, I threw a canvas tag into a basic website with !DOCTYPE html. When playing with the numbers, it displays with IE9 mode, and with emulate at lower versions, my Canvas disappeared. One interesting thing to note here is that the X-UA-compatible tag seems to override whatever group policy you have in place. That way if you have contoso.com set for one level, but one outlying site mynewapp.contoso.com needs HTML5 support, you can override it from the application itself.

example of tag:
<meta http-equiv="X-UA-Compatible" content="IE=8">

NOTE: This tag needs to be the first tag in the HEAD block

In any case, whenever working with web site problems, its always good to check different version levels to see if a site supports all the variations of browsers that may be in the environment, and make adjustments accordingly using whatever method is best.  Also play around with the F12 tools as they can be quite useful.  Similar tools exist in Chrome, and as extensions in firefox.