Tell IE9 to use compatibility mode? - html

I have a project experience map that is generated by JetPhoto software... it's wonderful, and is exactly what I needed. Unfortunately, it seems to get stuck in IE9. If I tell IE9 to use "compatibility mode", all the pins load fine (like in every other browser). The portfolio is up here: http://www.aboutcis.com/experience/
Is there any way to tell IE9 to load the page in compatibility view for all users?
I'm not much for HTML (it's gotten so complicated compared to when I learned it), but I came across the following tag...
<meta http-equiv="X-UA-Compatible" content="IE=7">
Is this the intended use of this tag? Am I on the right track? Does anyone have a tip or idea that might help me understand how to overcome this? Is this a DOCTYPE issue maybe (which I understand nothing about)?
Thanks!

The syntax for compatibility mode is:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >
The content attribute specifies the mode for the page; to mimic the behavior of Internet Explorer 7, specify IE=EmulateIE7. Specify IE=5, IE=7, IE=8 or IE=9 to select one of those compatibility modes. You can also specify IE=edge to tell Internet Explorer to use the highest mode available.
Understanding Document Compatibility Modes
Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:
IE9 mode provides the highest support available for established and
emerging industry standards, including the HTML5 (Working Draft), W3C
Cascading Style Sheets Level 3 Specification (Working Draft),
Scalable Vector Graphics (SVG) 1.0 Specification, and others.
IE8 mode supports many established standards, including the W3C
Cascading Style Sheets Level 2.1 Specification and the W3C Selectors
API; it also provides limited support for the W3C Cascading Style
Sheets Level 3 Specification (Working Draft) and other emerging
standards.
IE7 mode renders content as if it were displayed in standards mode by
Internet Explorer 7, whether or not the page contains a <!DOCTYPE>
directive.
Emulate IE9 mode tells Internet Explorer to use the <!DOCTYPE>
directive to determine how to render content. Standards mode
directives are displayed in IE9 mode and quirks mode directives are
displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the
<!DOCTYPE> directive.
Emulate IE8 mode tells Internet Explorer to use the <!DOCTYPE>
directive to determine how to render content. Standards mode
directives are displayed in IE8 mode and quirks mode directives are
displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the
<!DOCTYPE> directive.
Emulate IE7 mode tells Internet Explorer to use the <!DOCTYPE>
directive to determine how to render content. Standards mode
directives are displayed in Internet Explorer 7 standards mode and
quirks mode directives are displayed in IE5 mode. Unlike IE7 mode,
Emulate IE7 mode respects the <!DOCTYPE> directive. For many web
sites, this is the preferred compatibility mode.
IE5 mode renders content as if it were displayed in quirks mode by
Internet Explorer 7, which is very similar to the way content was
displayed in Microsoft Internet Explorer 5.
Edge mode tells Internet Explorer to display content in the highest
mode available. With Internet Explorer 9, this is equivalent to IE9
mode. If a (hypothetical) future release of Internet Explorer
supported a higher compatibility mode, pages set to edge mode would
appear in the highest mode supported by that version. Those same
pages would still appear in IE9 mode when viewed with Internet
Explorer 9.
Because edge mode documents display webpages using the highest mode available to the version of Internet Explorer used to view them, it is recommended that you should only use this document mode for testing purposes only. Do not use it for production uses.
For more information on IE compatibility mode, check this out.

Related

IE: Conditionally set Document Mode based on Compatibility Option

I'm working on a legacy system that has a mishmash of browser dependent features (don't ask). The plan is to revamp everything to be current, but in the meantime, I need to figure out a way to make the following happen:
If the user has Browser Mode set to compatibility mode for this site or in general, I need to make the Document Mode IE8. This specific case I'm looking into, I'm using IE10. When you switch to IE10 Compatibility mode, the "page default" for the Document Mode is Internet Explorer 7. If I could just make the page default Internet Explorer 8, I think that would solve my case for now.
When I try to use in the header, it ALWAYS forces to IE 8 compat mode.
I realize this is a very strange way to do things, and it's only temporary until I can properly fix the insanity....
Which IE8 mode do you want? IE8 Standards mode or IE8 "use the <!doctype>" mode? If the former, set x-ua-compatible to IE8. If the latter, set it to EmulateIE8. (The various options, in gory detail, can be found here.
(The first value specifically chooses IE8 standards mode as the target mode; the second will pick IE8 standards mode if the page contains a standards mode <doctype> or IE5 quirks mode if the page doesn't contain a <doctype>.)
The key is knowing which legacy document mode that you need for the page. Figure that out and target that mode specifically. (Use the Emulation tab of the Developer Tools to switch between modes until you find the one that works.)
Note that if you deploy the page to an Intranet (right click, choose Properties, and then check out the Zone value), you may wish to add a Mark of the Web to the page so that it opens in the Internet zone and avoids the various defaults that behave otherwise.

Meta tag `IE=EmulateIE9` results in unexpected document type

I am working on a site that is using the following:
Doctype: <!DOCTYPE html>
Meta tag: <meta http-equiv="X-UA-Compatible" value="IE=EmulateIE9">
When I run the site in IE > IE9, I am expecting the site to render in IE9 standards mode. This is not happening.
This is the behavior I am seeing:
Internet Explorer 11 -> Document mode 11
Internet Explorer 11 in compat mode -> Document mode 7
Internet Explorer 10 -> Document mode 10
Internet Explorer 10 in compat mode -> Document mode 7
Internet Explorer 8 -> Document mode 8 (this probably makes sense...)
Why is this happening? I have a reasonable doctype so it should render in IE9 standards. The MSDN page on the topic says that if I use IE=EmulateIE9 then the doctype will be choosen as:
IE9 mode (if a valid declaration is present)
Quirks mode (otherwise)
Just to be clear, I am not asking how to make the document render in IE9 standards mode. I know that I can just use IE=9 instead of IE=EmulateIE9. My question is: Why isn't the document rendering in IE9 standards?
Please check the Internet Explorer Standards Support Documentation Overview:
https://msdn.microsoft.com/en-us/library/ff405771(v=vs.85).aspx
Inside it states:
2.1.2.5 Compatibility View
Compatibility View settings can also impact the document mode
selection:
If a webpage is retrieved from a website in the Local intranet zone (see "About URL Security Zones" at [MSDN-SECZONES]), IE7 mode is
used.
or
If the webpage is retrieved from a site in a domain on the Compatibility View list (and the list is active), IE7 mode is used
(see "Understanding the Compatibility View List" at
[MSDN-UnderstandingCompViewList]).
So most likely, this matches your case

How to alter ie Browser Mode?

I found a lot of links that said adding
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
or an older version of DOCTYPE forces the browser into compatibility mode. But after repeated attempts with many combinations, seems to me that all it does is alter the Document Mode and NOT the Browser Mode
I bet if you just remove your DOCTYPE tag completely or make it invalid that IE will be forced into compatibility view. Broken markup of some sorts will force this mode. However, this will surely have other negative consequences for non-IE browsers.
You would like to force IE into compatibility mode?
Also, I don't believe IE will display compatibility mode in the console window.
Are you sure you don't mean quirks mode?
The browser mode function (as I understand it) in IE isn't exactly compatibility mode.
I'm just going to copy/paste from the official documentation below.
Browser Mode
Description
IE9
IE9 reports a UA string, version vector, and document mode to match the default browser behavior, which is the most standards-compliant mode in IE9. Use this mode to test how IE9 users experience your site.
IE9 Compatibility View
IE9 reports a UA string, version vector, and document mode, as if it is IE7; however, the UA string also includes the Trident/5.0 token indicating that the browser is really IE9. Use this mode to test how IE9 users experience your site if they click on the Compatibility View button.
IE8
IE9 reports a UA string, version vector, and document mode as if it is IE8. Use this mode to test how IE8 users experience your site.
IE7
IE9 reports a UA string, version vector, and document mode as if it is IE7. Use this mode to test how IE7 users experience your site.
The only way to force this to change no matter what, is to set it on the virtual directory level through IIS in the 'HTTP Headers' section of the properties menu. Changing it here will force the browser into whatever mode you set it to, 100% of the time.
Changing the setting here overrides whatever browser mode is specified at the web page level.
You can't. The Browser Mode is intended to be used by developers to see what their browser would look like with new features disabled (for instance, if I put my IE10 into the IE8 Browser Mode, it will no longer support border-radius, or anything else that was added).
Since it's a developer tool, there is no need for it on the regular user's side.
The Document Mode, on the other hand, involves how the document is rendered, not how it is supported. I can have my document in IE8 mode and still have rounded corners because the browser mode supports it.
That being said, you should ALWAYS use this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
If I see a site with a X-UA-Compatible header that contains anything else, I assume that the developer is a lazy bastard.

What is X-UA-Compatible when it references IE=edge,chrome=1?

I just saw this meta tag in the wild and was wondering it does and why it's used?
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Reading the documentation on About.com, it says:
"IE=edge" tells Internet Explorer to use the highest mode available to that version of IE. Internet Explorer 8 can support up to IE8 modes, IE9 can support IE9 modes and so on.
But what about the chrome=1 tag?
It's for Google's Chrome Frame browser add-on.
ChromeFrame can be installed on various versions of IE (especially handy for older versions that don't play nicely with modern web features). It essentially runs the chrome browser inside of IE.
In the case of the meta tag, IE should run in standards mode (most current edition "Edge") - and activate chrome frames if it exists.
I usually do some conditional browser stuff for older versions of IE, allowing the user to install the add-on as an option.
More here :
chrome frame API
(Keep in mind that Google Chrome Frame is no longer supported)
Also, starting in IE11 "edge" mode, which used to be experimental, is now the "preferred" mode - see Compatibility changes in IE11 Preview
Additionally, "document modes" are generally being deprecated in IE11 all together, so you should probably try to stop depending on them.

What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

What's the difference if one web page starts with
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
and If page starts with
<!DOCTYPE html>
<html>
<head>
<!-- without X-UA-Compatible meta -->
If there is no difference, I suppose I can just ignore the X-UA-Compatible meta header, since I just want it to be rendered in most standard mode in all IE versions.
November 2021 Update
As this answer is now 10+ years old my recommendation would be to leave this tag out altogether, unless you must support old legacy browsers.
October 2015 Update
This answer was posted several years ago and now the question really should be should you even consider using the X-UA-Compatible tag on your site? with the changes Microsoft has made to its browsers (more on those below).
Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE9 or IE8, then I would recommend using the tag. If you only support the latest browsers (IE11 and/or Edge) then I would consider dropping this tag altogether. If you use Twitter Bootstrap and need to eliminate validation warnings, this tag must appear in its specified order. Additional info below:
The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. IE11 has made changes to these modes; see the IE11 note below. Microsoft Edge, the browser that replaced IE11, only honors the X-UA-Compatible meta tag in certain circumstances. See the Microsoft Edge note below.
According to Microsoft, when using the X-UA-Compatible tag, it should be as high as possible in your document head:
If you are using the X-UA-Compatible META tag you want to place it as close to the top of the page's HEAD as possible. Internet Explorer begins interpreting markup using the latest version. When Internet Explorer encounters the X-UA-Compatible META tag it starts over using the designated version's engine. This is a performance hit because the browser must stop and restart analyzing the content.
Here are your options:
"IE=edge"
"IE=11"
"IE=EmulateIE11"
"IE=10"
"IE=EmulateIE10"
"IE=9"
"IE=EmulateIE9
"IE=8"
"IE=EmulateIE8"
"IE=7"
"IE=EmulateIE7"
"IE=5"
To attempt to understand what each means, here are definitions provided by Microsoft:
Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:
Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.
Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:
IE11 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.
IE10 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.
IE9 mode provides the highest support available for established and emerging industry standards, including the HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, and others. [Editor Note: IE 9 does not support CSS3 animations].
IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.
IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a <!DOCTYPE> directive.
Emulate IE9 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the <!DOCTYPE> directive.
Emulate IE8 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in IE8 mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the <!DOCTYPE> directive.
Emulate IE7 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the <!DOCTYPE> directive. For many web sites, this is the preferred compatibility mode.
IE5 mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Microsoft Internet Explorer 5.
IE10 NOTE: As of IE10, quirks mode behaves differently than it did in earlier versions of the browser. In IE9 and earlier versions, quirks mode restricted the webpage to the features supported by IE5.5. In IE10, quirks mode conforms to the differences specified in the HTML5 specification.
Personally, I always choose the http-equiv="X-UA-Compatible" content="IE=edge" meta tag, as older versions have plenty of bugs, and I do not want IE to decide to go into "Compatibility mode" and show my site as IE7 vs IE8 or 9. I always prefer the latest version of IE.
IE11
From Microsoft:
Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.
Use the HTML5 document type declaration to enable edge mode:
<!doctype html>
Edge mode was introduced in Internet Explorer 8 and has been available in each subsequent release. Note that the features supported by edge mode are limited to those supported by the specific version of the browser rendering the content.
Starting with IE11, document modes are deprecated and should no longer be used, except on a temporary basis. Make sure to update sites that rely on legacy features and document modes to reflect modern standards.
If you must target a specific document mode so that your site functions while you rework it to support modern standards and features, be aware that you're using a transitional feature, one that may not be available in future versions.
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.
Microsoft Edge (Replacement for Internet Explorer that comes bundled with Windows 10)
Information on X-UA-Compatible meta tag for the "Edge" version of IE. From Microsoft:
Introducing the “living” Edge document mode
As we announced in August 2013, we are deprecating document modes as of IE11. With our latest platform updates, the need for legacy document modes is primarily limited to Enterprise legacy web apps. With new architectural changes, these legacy document modes will be isolated from changes in the “living” Edge mode, which will help to guarantee a much higher level of compatibility for customers who depend on those modes and help us move even faster on improvements in Edge. IE will still honor document modes served by intranet sites, sites on the Compatibility View list, and when used with Enterprise Mode only.
Public Internet sites will be rendered with the new Edge mode platform (ignoring X-UA-Compatible). It is our goal that Edge is the "living" document mode from here out and no further document modes will be introduced going forward.
With the changes in Microsoft Edge to no longer support document modes in most cases, Microsoft has a tool to scan your site to check and see if it has code that is not compatible with Edge.
Chrome=1 Info for IE
There is also chrome=1 that you can use or use together with one of the above options like: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">. chrome=1 is for Google's Chrome Frame which is defined as:
Google Chrome Frame is an open source browser plug-in. Users who have the plug-in installed have access to Google Chrome's open web technologies and speedy JavaScript engine when they open pages in the browser.
Google Chrome Frame seamlessly enhances your browsing experience in Internet Explorer. It displays Google Chrome Frame enabled sites using Google Chrome’s rendering technology, giving you access to the latest HTML5 features as well as Google Chrome’s performance and security features without in any way interrupting your usual browser usage.
When Google Chrome Frame is installed, the web just gets better without you having to think about it.
But for that plug-in to work you must use chrome=1 in the X-UA-Compatible meta tag.
More info on Chrome Frame can be found here.
Note: Google Chrome Frame only works for IE6 through IE9, and was retired on February 25, 2014. More info can be found here. Thanks to #mck for the link.
Validation:
HTML5:
The page will validate using the W3 Validator only when using <meta http-equiv="X-UA-Compatible" content="IE=Edge">. For other values it will throw the error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge. In other words, if you have IE=edge,chrome=1 it will not validate. I ignore this error completely as modern browsers simply ignore this line of code.
If you must have completely valid code then consider doing this on the server level by setting HTTP header. As a note, Microsoft says, If both of these instructions are sent (meta and HTTP), the developer's preference (meta element) takes precedence over the web server setting (HTTP header). See olibre's answer or bitinn's answer for more details on how to set an HTTP header.
XHTML
There isn't an issue with validation when using <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> as long as the tag is properly closed (i.e. /> vs >).
Twitter Bootstrap (V3 and below)
This tag has been strongly recommended by the Bootstrap team since at least 2014, and Bootlint, the linter authored by the twbs team continues to throw a warning when the tag is omitted. The linter distinguishes between warnings and errors, and as such the severity of omitting this tag may be considered minor.
For more information on X-UA-Compatible see Microsoft's Website Defining Document Compatibility.
For more information on what IE supports see caniuse.com.
For more information on Twitter Bootstrap requirements, see the bootlint project wiki page.
Use content="IE=edge,chrome=1"   Skip other X-UA-Compatible modes
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
--------------------------
No compatibility icon The IE9 Address bar does not show up the Compatibility View button and the page does not also show up a jumble of out-of-place menus, images, and text boxes.
Features This meta tag is required to enable javascript::JSON.parse() on IE8 (even when <!DOCTYPE html> is present)
Correctness Rendering/Execution of modern HTML/CSS/JavaScript is more valid (nicer).
Performance The Trident rendering engine should run faster in its edge mode.
Usage
In your HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge means IE should use the latest (edge) version of its rendering engine
chrome=1 means IE should use the Chrome rendering engine if installed
Or better in the configuration of your web server:
(see also the RiaD's answer)
Apache as proposed by pixeline
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent
</IfModule>
Nginx as proposed by Stef Pause
server {
#...
add_header X-UA-Compatible "IE=Edge,chrome=1";
}
Varnish proxy as proposed by Lucas Riutzel
sub vcl_deliver {
if( resp.http.Content-Type ~ "text/html" ) {
set resp.http.X-UA-Compatible = "IE=edge,chrome=1";
}
}
IIS (since v7)
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=edge,chrome=1" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Microsoft recommends Edge mode since IE11
As noticed by Lynda (see comments), the Compatibility changes in IE11 recommends Edge mode:
Starting with IE11, edge mode is the preferred document mode;
it represents the highest support for modern standards available to the browser.
But the position of Microsoft was not clear. Another MSDN page did not recommend Edge mode:
Because Edge mode forces all pages to be opened in standards mode,
regardless of the version of Internet Explorer,
you might be tempted to use this for all pages viewed with Internet Explorer.
Don't do this, as the X-UA-Compatible header is only supported starting
with Windows Internet Explorer 8.
Instead, Microsoft recommended using <!DOCTYPE html>:
If you want all supported versions of Internet Explorer to open
your pages in standards mode, use the HTML5 document type declaration [...]
As Ricardo explains (in the comments below) any DOCTYPE (HTML4, XHTML1...) can be used to trigger Standards Mode, not only HTML5's DOCTYPE. The important thing is to always have a DOCTYPE in the page.
Clara Onager has even noticed in an older version of Specifying legacy document modes:
Edge mode is intended for testing purposes only;
do not use it in a production environment.
It is so confusing that Usman Y thought Clara Onager was speaking about:
The [...] example is provided for illustrative purposes only;
don't use it in a production environment.
<meta http-equiv="X-UA-Compatible" content="IE=7,9,10" >
Well... In the rest of this answer I give more explanations why using content="IE=edge,chrome=1" is a good practice in production.
History
For many years (2000 to 2008), IE market share was more than 80%. And IE v6 was considered as a de facto standard (80% to 97% market share in 2003, 2004, 2005 and 2006 for IE6 only, more market share with all IE versions).
As IE6 was not respecting Web standards, developers had to test their website using IE6. That situation was great for Microsoft (MS) as web developers had to buy MS products (e.g. IE cannot be used without buying Windows), and it was more profit-making to stay non-compliant (i.e. Microsoft wanted to become the standard excluding other companies).
Therefore many many sites were IE6 compliant only, and as IE was not compliant with web standard, all these web sites was not well rendered on standards compliant browsers. Even worse, many sites required only IE.
However, at this time, Mozilla started Firefox development respecting as much as possible all the web standards (other browser were implemented to render pages as done by IE6). As more and more web developers wanted to use the new web standards features, more and more websites were more supported by Firefox than IE.
When IE market sharing was decreasing, MS realized staying standard incompatible was not a good idea. Therefore MS started to release new IE version (IE8/IE9/IE10) respecting more and more the web standards.
The web-incompatible issue
But the issue is all the websites designed for IE6: Microsoft could not release new IE versions incompatible with these old IE6-designed websites. Instead of deducing the IE version a website has been designed, MS requested developers to add extra data (X-UA-Compatible) in their pages.
IE6 is still used in 2016
Nowadays, IE6 is still used (0.7% in 2016) (4.5% in January 2014), and some internet websites are still IE6-only-compliant. Some intranet website/applications are tested using IE6. Some intranet website are 100% functional only on IE6. These companies/departments prefer to postpone the migration cost: other priorities, nobody no longer knows how the website/application has been implemented, the owner of the legacy website/application went bankrupt...
China represents 50% of IE6 usage in 2013, but it may change in the next years as Chinese Linux distribution is being broadcast.
Be confident with your web skills
If you (try to) respect web standard, you can simply always use http-equiv="X-UA-Compatible" content="IE=edge,chrome=1". To keep compatibility with old browsers, just avoid using latest web features: use the subset supported by the oldest browser you want to support. Or If you want to go further, you may adopt concepts as Graceful degradation, Progressive enhancement and Unobtrusive JavaScript. (You may also be pleased to read What should a web developer consider?.)
Do do not care about the best IE version rendering: this is not your job as browsers have to be compliant with web standards. If your site is standard compliant and use moderately latest features, therefore browsers have to be compliant with your website.
Moreover, as there are many campaigns to kill IE6 (IE6 no more, MS campaign), nowadays you may avoid wasting time with IE testing!
Personal IE6 experience
In 2009-2012, I worked for a company using IE6 as the official single browser allowed. I had to implement an intranet website for IE6 only. I decided to respect web standard but using the IE6-capable subset (HTML/CSS/JS).
It was hard, but when the company switched to IE8, the website was still well rendered because I had used Firefox and firebug to check the web-standard compatibility ;)
The difference is that if you only specify the DOCTYPE, IE’s Compatibility View Settings take precedence. By default these settings force all intranet sites into Compatibility View regardless of DOCTYPE. There’s also a checkbox to use Compatibility View for all websites, regardless of DOCTYPE.
X-UA-Compatible overrides the Compatibility View Settings, so the page will render in standards mode regardless of the browser settings. This forces standards mode for:
intranet pages
external web pages when the computer administrator has chosen “Display all websites in Compatibility View” as the default—think big companies, governments, universities
when you unintentionally end up on the Microsoft Compatibility View List
cases where users have manually added your website to the list in Compatibility View Settings
DOCTYPE alone cannot do that; you will end up in one of the Compatibility View modes in these cases regardless of DOCTYPE.
If both the meta tag and the HTTP header are specified, the meta tag takes precedence.
This answer is based on examining the complete rules for deciding document mode in IE8, IE9, and IE10. Note that looking at the DOCTYPE is the very last fallback for deciding the document mode.
Use this to force IE to hide that annoying browser compatibility button in the address bar:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Since I can not add a comment to the marked answer I will just post this here.
In addition to the correct answer you can indeed have this validated. Since this meta tag is only directed for IE all you need to do is add a IE conditional.
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->
Doing this is just like adding any other IE conditional statement and only works for IE and no other browsers will be affected.
I think this diagram from Microsoft explains all. In order to tell IE how to render the content, !DOCTYPE has to work with X-UA-Compatible meta tag. !DOCTYPE by itself has no affect on changing IE Document Mode.
http://ie.microsoft.com/testdrive/ieblog/2010/Mar/02_HowIE8DeterminesDocumentMode_3.png
Just one sentence to say Instruct Internet Explorer to use its latest rendering engine
<meta http-equiv="x-ua-compatible" content="ie=edge">
Just for completeness, you don't actually have to add it to your HTML (which is unknown http-equiv in HTML5)
Do this and never look back (first example for apache, second for nginx)
Header set X-UA-Compatible "IE=Edge,chrome=1"
add_header X-UA-Compatible "IE=Edge,chrome=1";
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
To make this line work as expected, make sure that:
It is the first element right after <head>
No conditional comments are used before the meta tag, e. g. on the <html> element
Otherwise some IE versions simply ignore it.
UPDATE
These two rules are simplified but they are easy to remember and to verify. Despite MSDN docs stating you can put title and other meta tags before this one, I would not recommend to do so.
How make it work with conditional comments.
Interesting article about the order of elements in the head. (blogs.msdn.com, for IE)
REFERENCE
From the MSDN documentation:
The X-UA-Compatible [...] must appear in the header of the webpage (the HEAD section)
before all other elements except for the title element and other meta elements.
if you use your website in the same network as the server IE likes to switch to compability mode despite DOCTYPE.
Adding meta http-equiv="X-UA-Compatible" content="IE=Edge" disables this unwanted behaviour.
This is LITERALLY 1 google query away, but here goes:
http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
Understanding legacy document modes
Use the following value to display the webpage in edge mode, which is
the highest standards mode supported by Internet Explorer, from
Internet Explorer 6 through IE11.
<meta http-equiv="x-ua-compatible" content="IE=edge"
Note that this is functionally equivalent to using the HTML5 doctype. It places Internet Explorer into the highest supported
document mode. Edge most is most useful for regularly maintained
websites that are routinely tested for interoperability between
multiple browsers, including Internet Explorer.
Note
Starting with IE11, edge mode is considered the preferred document mode. (In earlier versions, it was considered experimental.)
To learn more, see Document modes are deprecated. Starting with
Windows Internet Explorer 8, some web developers used the edge mode
meta element to hide the Compatibility View button on the address bar.
As of IE11, this is no longer necessary as the button has been removed
from the address bar. Because it forces all pages to be opened in
standards mode, regardless of the version of Internet Explorer, you
might be tempted to use edge mode for all pages viewed with Internet
Explorer. Don't do this, as the X-UA-Compatible header is only
supported starting with Internet Explorer 8.
Tip
If you want all supported versions of Internet Explorer to open your pages in standards mode, use the HTML5 document type declaration, as shown in the earlier example.
Also among the search results is:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
2.1.3.5 X-UA-Compatibility Meta Tag and HTTP Response Header
This functionality will not be implemented in any version of Microsoft Edge.
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
See https://msdn.microsoft.com/en-us/library/ff955275(v=vs.85).aspx
Yes, I know that I'm late to the party, but I just had some issues and discussions, and in the end my boss had me remove the X-UA-Compatible tag remove from all documents I've been working on.
If this information is out-of-date or no longer relevant, please correct me.