Using X-UA-Compatible to render websites in compatibility mode.
Add X-UA-Compatible meta tags or headers to force Internet Explorer to run websites in compatibility mode. the same can be done by forcing http headers on web servers
A compatibility mode is a software mechanism in which a software either emulates an older version of the software or mimics another operating system to allow older or incompatible software or files to remain compatible with the computer's newer hardware or software.
One of the most common and practical examples of compatibility mode is browsers rendering websites in compatibility mode
Internet Explorer
"Compatibility View" is a compatibility mode feature of the web browser Internet Explorer in version 8 and later. When active, Compatibility View forces IE to display the webpage in Quirks mode as if the page were being viewed in IE7. When compatibility view is not activated, IE is said to be running in native mode.
Origins: IE8
Internet Explorer 8 was promoted by Microsoft as having stricter adherence to W3C described web standards than Internet Explorer 7. As a result, as in every IE version before it, some percentage of web pages coded to the behavior of the older versions would break in IE8. This would have been a repetition of the situation with IE7 which, while having fixed bugs from IE6, broke pages that used the IE6-specific hacks to work around its non-compliance.
To avoid this situation, IE8 implemented a form of version targeting whereby a page could be authored to a specific version of a browser using the X-UA-Compatible declaration either as a meta element or in the HTTP headers.
To maintain backward compatibility, sites can opt into the IE7-like handling of content by inserting a specially created meta element into the web page that triggers compatibility mode in the browser.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
A newer version of the browser than the page was coded for would emulate the behavior of the older version, so that the assumptions the page made about the browser's behavior hold true.
Microsoft proposed that a page with a doctype that triggers standards mode (or almost standards mode) in IE7 would, by default, trigger IE7-like behavior, called "standards mode" (now called "strict mode") in IE8 and future versions of IE. The new features of IE8 are enabled to trigger what Microsoft called the "IE8 standards mode" (now called "standards mode"). Doctypes that trigger quirks mode in IE7 will continue to do so in IE8.
The result for IE 8 Beta 1 was that it could render three modes: "Quirks," "Strict," and "Standard." When there is an old DOCTYPE or when there is no DOCTYPE, IE renders it like IE5 would (quirks mode). When a special meta element or its corresponding HTTP header is included in a web page, IE8 will render that page like IE7 would (strict mode). Otherwise, IE8 renders pages with its engine (standard mode). Users can switch between the three modes with a few clicks. The release of Internet Explorer 8 Beta 1 revealed that many websites do not work in this new standards mode.
Recent changes in IE11
Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.
Starting with IE11, document modes are deprecated and should no longer be used, except on a temporary basis.
Use the HTML5 document type declaration to enable edge mode:
HTML
<!doctype html>
If you currently use the x-ua-compatible header to target a legacy document mode, it's possible your site won't reflect the best experience available with IE11.
Common/known problems:
If you have already added the X-UA-Compatible meta tag and it's not working as expected, there could be a couple of factors. See below for a list of common/known issues and their fixes.
IE9 Intranet compatibility mode in Intranet websites
Andrew here explains nicely why IE9 falls back to IE7 mode when running intranet websites and how to properly fix them
Order of meta tags
The X-UA-Compatible meta tag should appear immediately after the <head> tag.
Headers overridden
Check and verify that your application or your webserver is not overriding the headers, because, headers have a higher priority that meta tags.
Invalid W3C
If your HTML markup has invalid content or errors, then websites will not be displayed properly in compatibility mode.
If you are using enterprise version then check the site list. A very detailed list of compatible versions can be found here
TL;DR: Fixes
Add meta tags immediately after the <head> tag.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
or
specify html5 doctype
<!doctype html>
or
Force your application or web server to serve with compatible headers. In case of a Ruby on Rails application, you can do the same by adding the following code to your application.rb
config.action_dispatch.default_headers = {
'X-UA-Compatible' => 'IE=Edge'
}
Note that, the HTTP headers have the highest precedence, followed by doctype followed by meta tags.
Hope this helps someone.