1544

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.

TylerH
  • 19,065
  • 49
  • 65
  • 86
Morgan Cheng
  • 66,562
  • 63
  • 166
  • 223

12 Answers12

1787

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 directive.

  • Emulate IE9 mode tells Internet Explorer to use the 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 directive.

  • Emulate IE8 mode tells Internet Explorer to use the 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 directive.

  • Emulate IE7 mode tells Internet Explorer to use the 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 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

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.

Callum Watkins
  • 2,444
  • 2
  • 27
  • 42
L84
  • 42,350
  • 55
  • 167
  • 243
  • 42
    If I don't have "X-UA-Compatible" in headers, what would happen? – Morgan Cheng Jul 21 '11 at 07:12
  • 48
    Basically what happens is when you have the X-UA-Compatible it tells IE how to behave in regards to the value you set (IE=edge etc) if it is not there IE will show the site how it thinks best it should be shown. That could be compatibility mode or that could be the latest version of IE. Whatever Microsoft/IE thinks is best. Make sense? – L84 Jul 21 '11 at 18:09
  • 1
    This link - http://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx - might help make some sense of this all. – L84 Jul 21 '11 at 18:17
  • @Lynda I'm still not clear on what the difference between the two examples are. According to [this article](http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx) means to use a standards based document type (HTML5/css3). Why is that different from IE=edge (currently IE=9) compatibility, which is also supposed to be using the latest standards? I know it is because I see big differences in a page I'm working on when switching between the two. – xr280xr May 17 '12 at 15:37
  • @xr280xr - I do not know. That article is a bit confusing if you ask me. Ask this in another question and someone who has more knowledge can help. Sorry I cannot help more. – L84 May 17 '12 at 20:57
  • @Lynda Thanks. I created this question about my specific problem that lead me to this question: http://stackoverflow.com/questions/10625460/wpf-system-windows-controls-webbrowser-not-rendering-link-buttons – xr280xr May 24 '12 at 20:31
  • @Lynda - Can you clarify. How does IE determine what is "the highest mode available to that version of IE."? – Travis J Sep 24 '12 at 23:06
  • 2
    @TravisJ - From my understanding the highest mode available basically means IE 8 can support up to IE8 modes, IE9 can support IE9 modes and so on. I added some definitions for each mode provided by Microsoft. – L84 Sep 24 '12 at 23:59
  • @Lynda - Thanks for the link, I had actually read that in its entirety before I commented here. What made me comment was this scenario: I use IE8 to test. It was running slow on a page due to large rendering. I added the meta tag. It got faster. Is this because IE9 is also installed on this machine and it defaulted to that? It seemed hard for me to figure out why setting the content to "Edge" would improve performance since, as you state, it should have just chosen IE8 anyway (which it says it is still at). Is it using IE9 somehow? I could not figure out where the difference was coming from. – Travis J Sep 25 '12 at 00:01
  • @TravisJ - The mysteries of IE => I really have no idea. If you ever do discover this answer I would love to know. – L84 Sep 25 '12 at 02:28
  • 1
    Here is the official flow on how the compatibility view is triggered in IE (up to IE 9): http://ie.microsoft.com/testdrive/ieblog/2010/Jun/16_IEsCompatibilityFeaturesforSiteDevelopers_1.svg. For IE10 there is an even newer chart: http://msdn.microsoft.com/en-us/library/ff955275%28v=vs.85%29.aspx – Spiralis Dec 20 '12 at 12:57
  • 1
    Ops. Actually IE 10 has multiple flowcharts desribing this in different subsections, This is the mainpage: http://msdn.microsoft.com/en-us/library/ff406036%28v=vs.85%29.aspx – Spiralis Dec 20 '12 at 13:08
  • @Lynda - thanks for this exhaustive answer. Can you help me with your explanation though: "Emulate IE9 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode.". By directive you mean the DTD, is this correct? If yes, I cannot see any "Standard Mode" directive on the W3C page http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD, can you enlighten me? – Adrien Be Mar 26 '13 at 13:52
  • @AdrienBe - I am not 100% sure. I believe `Standard Mode` is an IE Mode. It would probably be best to read some information on [Microsoft's Website](http://msdn.microsoft.com/en-us/library/hh781499%28v=vs.85%29.aspx) to find the exact answer. Sorry I cannot be more help. – L84 Mar 26 '13 at 19:48
  • @Lynda - thanks anyway. Seems like Microsoft is making things more difficult than it should be - being so vague definitely shows that they don't really know what they are doing. So annoyed by IE browser... every version come as bad as the previous.. just with more ugly hacks to learn – Adrien Be Mar 27 '13 at 14:00
  • 10
    @AdrienBe - I completely agree! So far IE 10 has been the best for me but I despise any other version. One time I had a page setup with some effects around 200-300 lines of HTML and about 20 minutes of coding. To get IE to work I had to add another 1,000 lines of code (mostly 3rd party javascript)and 2-3 hours of work! I really hate IE => – L84 Mar 28 '13 at 02:02
  • 9
    Google Chrome Frame will be retired in January 2014: http://blog.chromium.org/2013/06/retiring-chrome-frame.html – mck Jun 15 '13 at 17:46
  • @mck - Good to know. Thanks for posting the link. Hopefully sometime soon we will not have to worry with `X-UA-Compatible` and all of our woes will be a thing to look back on and laugh. => – L84 Jun 16 '13 at 04:59
  • What happens if you have the chrome=1 tag for enabling content at IE8, and a user using IE=10 loads the page? will it ask them to install chrome frame or just work as usual? – David Karlsson Jan 20 '14 at 08:17
  • 1
    @DavidKarlsson - If it is installed on their computer I am unsure what will happen, however, when I test my sites in IE 9, 10 and 11 without Chrome Frame installed I am not asked anything about installing Chrome Frame. Also as noted above Chrome Frame is being retired so it won't be in use much longer. – L84 Jan 20 '14 at 16:50
  • Is it possible to overwrite previous `X-UA-Compatible` meta tags later on in the document... i.e. in the document head: `` and then in a frames head: `` ? If this makes no sense, I have an SO question: http://stackoverflow.com/questions/32242594/html5-video-and-audio-not-working – Zze Aug 27 '15 at 22:50
  • I tend to avoid IE altogether, but when I do have to run tests, I run with whatever's close enough to the other browsers. Right now, we're having an issue with awesome-bootstrap-checkbox where the checkmark is floating higher in IE (edge/11) on our test server, but renders just fine on local dev. It still renders as a checkmark inside a checkbox, but the point isn't centered. I hate IE and MS Edge on my laptop at home is not much of an improvement. C§ – CSS Sep 16 '15 at 16:29
  • 1
    @AdrienBe They absolutely make things more difficult than necessary, and probably on purpose. Since it's pre-loaded to every Windows environment (even back to 3.1, bless their hearts), unfortunately it's the fallback browser for the world. My preference is Chrome for performance, and FireFox for personal security since they're the only ones that haven't admitted to info sharing with the US Gov. C§ – CSS Sep 16 '15 at 16:36
  • @Lynda Thank you for such an amazing and highly informative answer. I am however wondering if you, or anyone else reading this, knows of a resource that explains the implications of an IE9 browser using EmulateIE8 having an effect on Google Analytics Browser Stats? Do these IE9 users get recorded as IE8 due to the userAgent string being changed? Something like that can be crucial in determining supported browsers depending on the number of reported users. Thanks in advance :) – carmat Dec 23 '15 at 12:23
  • @carmat - I have no clue. Probably worth posting as a new question. If you do, share the link. I'm curious for the answer as well. – L84 Dec 24 '15 at 06:15
  • As for how the browser determines it's document mode in general see this link https://msdn.microsoft.com/en-us/library/ff405803(v=vs.85).aspx – Aides Jan 25 '17 at 08:18
  • Internet explorer sucks – EKanadily Feb 15 '17 at 15:21
  • I don't understand the point? If a user is stuck using an older version of IE, say IE8 (and I have seen companies that still use IE6, for example), the best they can experience is IE8 which is the default. With or without this metatag you still have the same problem.....how to design a web page for 6 different versions of IE. Because "Edge" was not out when IE8, for example, was released, it wont know what that means anyway. It seems redundant, as at some point you still have to design your web site for "graceful" HTML collapse on the oldest IE browsers anyway. – Stokely Sep 05 '18 at 08:03
  • @Stokely - The reason is there are times when older versions of IE will default to IE 7 even though you're running IE 9. With that said, I do agree that it becomes redundant, especially in today's websites. – L84 Sep 06 '18 at 16:36
353

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">

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 ;)

Community
  • 1
  • 1
oHo
  • 41,098
  • 25
  • 141
  • 183
  • 2
    'Edge mode is intended for testing purposes only; do not use it in a production environment.' See http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx – Carl Onager Apr 22 '13 at 14:54
  • 5
    Please @ClaraOnager take some time to explain what is wrong in my answer (from your point of view). Even if MS does not recommend use of *Edge mode* in production environment, there are good reasons to use it in production environment. It is important to technically clarify our best practices. I like to share my knowledge and experiences. I hope you too. We can improve together ;) Cheers – oHo Apr 23 '13 at 09:55
  • @olibre This comment is misleading: *If you want all supported versions of Internet Explorer to open your pages in standards mode, use the HTML5 document type declaration.* -- You don't have to use HTML5's DOCTYPE to trigger Standards Mode. You can use ANY DOCTYPE, it doesn't matter which one (HTML4, XHTML1, etc); The important thing is to **always have** a DOCTYPE in your pages. – Ricardo Zea Jun 15 '13 at 06:56
  • 2
    Hi @Ricardo, I agree with you. Microsoft says _"If you want all supported versions of Internet Explorer to open your pages in standards mode, use the HTML5 [...]"_ in the section [Understanding legacy document modes](http://msdn.microsoft.com/library/jj676915.aspx#DCModes) (see the **Tip**). Maybe my explanation is unclear... Maybe I have misunderstood something... I have changed my text... What do you think about my changes? is it OK for you? What do you advice to change/improve within my answer? Thanks for your feedback. Cheers ;-) – oHo Jun 18 '13 at 05:12
  • @olibre, so as to not stay too much off-topic, yes, your correction above seems proper, thanks for doing that. And thanks for the credits too :). – Ricardo Zea Jun 18 '13 at 21:52
  • 5
    @ClaraOnager ...in your first answer you are pointing incorrectly, in the reference page.. MS says not to use in production environment for : not the other Edge things . – Usman Younas Oct 09 '13 at 16:25
  • The HTML 5 declaration does *NOT* force IE to render as the latest version of IE. Our company, despite having as the very first line, continually has pages rendering as IE8 compatibility/IE7 standards. – absynthe minded web smith Oct 14 '13 at 16:47
  • Sure. Although the developers have done something weird with the X-UA declaration. If you look at it in non-IE, it shows up as IE=edge, chrome=1. It does in IE9 as well, where the page appears correct. In IE8, it's IE=8, and it renders with problems. In IE10, it's IE=7, which definitely causes problems. http://www.celebritycruises.com/genericHtmlTemplate.do?&pagename=celebrity_shorex_exclusives#&panel1-1 – absynthe minded web smith Oct 16 '13 at 18:06
  • Yep @absynthemindedwebsmith the X-UA declaration of the website [celebritycruises.com](http://celebritycruises.com) is weird! Their web developers may not have checked their rendered webpages... maybe they do not use IE (for instance, they may not use MS-Windows, but only Mac or Linux). Cheers ;) – oHo Oct 16 '13 at 19:41
  • I can't explain why the coders changed what I gave them, but we use Macs and Windows, test in all the modern browsers ... + IE8. When we remove the declaration, IE8 tends to default to IE8 Compatibility/IE7 Standards. Testers report IE9 looks borked then too. – absynthe minded web smith Oct 17 '13 at 20:43
  • 3
    About Edge Mode being used in production environment. From Microsoft: `Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.` – L84 Oct 21 '13 at 04:16
  • 1
    Hi @ClaraOnager. Since IE11, Microsoft recommends now *Edge mode*. Is the answer correct from your point of view? What may I improve? Congratulations for your reputation increase ;-) Cheers – oHo Oct 21 '13 at 09:59
  • facing same related issue, if any one can help me out : http://stackoverflow.com/questions/22013880/how-to-set-ie-mode-by-meta-tag?noredirect=1#comment33368198_22013880 – dsi Feb 26 '14 at 05:27
  • 1
    The beginning of this answer is wrong ("Correctness / Optimized"). Microsoft have always clearly stated that the presence of a will trigger the latest standards mode. If you're on a server where that's not the case, then you've changed your browser settings, or the server itself is sending an X-UA-Compatible statement in its headers. You do NOT need IE=Edge to trigger standards mode in IE8+ (and X-UA-Compatible is doesn't work on IE7 and below). – Chuck Le Butt Oct 13 '14 at 20:19
  • 1
    Hi @Chuck. Thank you for your feedback, I will do some checking and update the *Correctness* and *Optimized* parts ;-). I have also read the same from Microsoft documentation. But my experience is different: the menu `View source` displayed the presence of ` ` but IE8 was still behaving as IE6 :-( I had to set `IE=edge` to get the right behaviour! Please do also some experiments on your side. Cheers – oHo Oct 13 '14 at 20:29
  • @olibre Remember to ensure you're not testing in a "Local Internet" zone. – Chuck Le Butt Oct 13 '14 at 20:51
  • Yep @Chuck it was in a local intranet. I believe you (no website available currently for testing, and no time...). Cheers :-) – oHo Oct 14 '14 at 09:29
  • 1
    Very good post......I too have designed for IE6 in years past while also trying to support Web Standards, Netscape2, and a host of situations like quirksmode, etc. The QUALITY of a web developer used to be how good you were designing cross-browser, Web Standards compatible sites. This metatag solution ruins this and creates the illusion you can type a tag and your site is fine. Wrong. We need to teach kids a great web site should work in ALL INTERNET EXPLORER user-agents, even IE5.5. Forget this metatag. It just adds confusion to good web design practices. - Mitchell Stokely – Stokely Sep 05 '18 at 08:16
  • `In 2009-2012, I worked for a company using IE6 as the official single browser allowed.` You sir, were obviously participating in some kind of experiment. – dgo May 29 '20 at 20:32
62

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.

IE Compatibility View Settings dialog

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.

andrewdotn
  • 27,806
  • 6
  • 80
  • 110
  • 1
    In intranet scenario, by default IE10 renders in compatibility mode. See stackoverflow.com/questions/13284083/… . This tag is not required by default for internet, but is required (by default) when using https://myintenralserver/myapp . I wanted to add this comment, because the internet vs. intranet difference was only clear from the text in the screenshot, not in the text of any answers on the page. – yzorg Apr 23 '13 at 13:08
  • You’re right, I should have been clearer about that. I rewrote the post; let me know if there’s anything else I should address. Thanks! – andrewdotn Apr 23 '13 at 16:32
  • Thanks! this answer is lot more clearer than other answers regarding intranet sites. Other answers go into technical details as to why and how. I hate MS IE. Also good writing: one paragraph makes it clear as to why we need the meta tag. Bravo – Aniket Inge May 04 '16 at 10:42
  • 3
    I wish I could upvote this answer a hundred times. Life-saving screen grab right there. Blood pressure lowering as I type this... – EvilDr Mar 17 '17 at 07:07
  • Awesome awesome awesome! Thank you very much for this answer. – Seanosapien May 16 '18 at 09:28
26

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.

EMurph78
  • 387
  • 3
  • 5
  • 5
    Conditional comments should not be used EXCEPT to target HTML for <=IE9. (This was true even when this answer was written) – EKW Jun 26 '16 at 03:43
26

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" />
George Filippakos
  • 14,863
  • 12
  • 75
  • 86
  • 1
    'Edge mode is intended for testing purposes only; do not use it in a production environment.' See http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx – Carl Onager Apr 22 '13 at 14:54
  • 4
    For good measure I use `` with the `chrome=1` directive so it prompts IE6, 7, 8 users to install/use [Chrome Frame](http://www.chromium.org/developers/how-tos/chrome-frame-getting-started). Even [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L8) uses it. – Ricardo Zea Jun 18 '13 at 21:49
  • 10
    @ClaraOnager Although Microsoft says it, it doesn't necessarily mean they're right. I've used `` since the day it came out without a problem at all. Actually, I've saved my team and myself hundreds of headaches already by making users' IE use its latest engine to render the pages we build. Contrary to you and Microsoft, I do recommend everyone to use the above meta tag _every time_. As long as IE is still around, we'll be "forced" to use this meta tag :p – Ricardo Zea Jun 18 '13 at 21:56
  • This has changed with IE11. This version has taken a dramatic move to the world of browsers following official standards. It has gone to the extremes as to not even identifying itself as Internet Explorer! Now it says it's "Netscape" and not including anything in the browser info to give away it's true identity. If you still encounter any quirks in the IE browser from this version on, you need to force it into IE10 by setting ``. Then it reports itself as Microsoft Internet Explorer. – awe Nov 28 '13 at 07:47
  • facing same related issue, if any one can help me out : http://stackoverflow.com/questions/22013880/how-to-set-ie-mode-by-meta-tag?noredirect=1#comment33368198_22013880 – dsi Feb 26 '14 at 05:28
  • @ricardozea Looks like `chrome=1` has been removed from HTML5 Boilerplate. https://github.com/h5bp/html5-boilerplate/pull/1396 – XåpplI'-I0llwlg'I - Jul 21 '14 at 18:15
  • @XåpplI'-I0llwlg'I- Indeed, Google Chrome Frame is not supported anymore since 2/25/14 - http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/chrome-frame-faq. My answer is quite old anyway. Thanks for posting/updating. – Ricardo Zea Jul 21 '14 at 19:34
  • I agree with richard here, that tag is needed, I've made a bunch of sites that do have the html doctype on them and while Firefox and Chrome are rendering them properly. IE still will not do it unless I add this tag as well. so until there's a better way to make IE follow the same standards as everyone else. this tag is needed in production as well. – Kit Ramos Nov 19 '17 at 19:48
18

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.

enter image description here

http://ie.microsoft.com/testdrive/ieblog/2010/Mar/02_HowIE8DeterminesDocumentMode_3.png

akjoshi
  • 14,589
  • 13
  • 94
  • 116
James Tsai
  • 281
  • 2
  • 4
  • 3
    Here is an updated version that includes IE9. OMG... http://ie.microsoft.com/testdrive/ieblog/2010/Jun/16_IEsCompatibilityFeaturesforSiteDevelopers_1.svg – Spiralis Dec 20 '12 at 12:55
  • 3
    And this one includes IE10: http://msdn.microsoft.com/en-us/library/ff406036%28v=vs.85%29.aspx The different chapters have their own separate flowcharts... – Spiralis Dec 20 '12 at 13:02
  • You've misread that flow diagram. In the absense of X-UA-Compatible the browser will look for . If it finds one, it renders in standards mode (aka "EmulateIE8"). If it doesn't, it reverts to "Quirks Mode". – Chuck Le Butt Oct 13 '14 at 20:14
  • Thanks for uploading the image to Stackoverflow. The original links to Microsoft are all dead. – Elmue May 13 '20 at 21:18
13

Just one sentence to say Instruct Internet Explorer to use its latest rendering engine

<meta http-equiv="x-ua-compatible" content="ie=edge">
Bipon Biswas
  • 9,919
  • 1
  • 23
  • 34
12

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";
RiaD
  • 42,649
  • 10
  • 67
  • 110
bitinn
  • 8,385
  • 8
  • 34
  • 61
  • 2
    @HueiTan - I think the poster is saying that when you try to validate the page using the [W3 Validator](http://validator.w3.org/check) it will throw an error: `Bad value X-UA-Compatible for attribute http-equiv on element meta.` - This doesn't mean it won't work. It just is not valid code. – L84 Jun 07 '14 at 01:50
8
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

To make this line work as expected, make sure that:

  1. It is the first element right after <head>
  2. 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.

Community
  • 1
  • 1
ToniTornado
  • 2,051
  • 27
  • 34
5

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.

Freakyuser
  • 2,614
  • 15
  • 42
  • 69
  • Another word for 'same network as the server' is intranet ... so basically IE10 is broken by default for all intranet sites. See screenshot in @AndrewNeitsch answer. – yzorg Apr 23 '13 at 13:10
3

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:

Community
  • 1
  • 1
Joe Mike
  • 1,090
  • 9
  • 16
3

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.

Shawn Spencer
  • 1,312
  • 2
  • 14
  • 21