"X-Ua-Compatible" Content="Ie=9; Ie=8; Ie=7; Ie=Edge"

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

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.

X-UA-Compatible content=IE=9; IE=8; IE=7; IE=EDGE

If you support IE, for versions of Internet Explorer 8 and above, this:

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />

Forces the browser to render as that particular version's standards. It is not supported for IE7 and below.

If you separate with semi-colon, it sets compatibility levels for different versions. For example:

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9" />

Renders IE7 and IE8 as IE7, but IE9 as IE9. It allows for different levels of backwards compatibility. In real life, though, you should only chose one of the options:

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

This allows for much easier testing and maintenance. Although generally the more useful version of this is using Emulate:

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

For this:

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

It forces the browser the render at whatever the most recent version's standards are.

For more information, there is plenty to read about on MSDN,

meta http-equiv=“X-UA-Compatible” content=“IE=edge” is not working with IE9

i hope it help you

  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

Why use X-UA-Compatible IE=Edge anymore?

In theory, including <meta http-equiv="X-UA-Compatible" content="IE=edge"> forces IE to display your HTML using "Standards Mode" (as opposed to "Quirks Mode"), making it more inline with other modern browsers.

However, as @David's answer points out, unless you're hosting a site in the "Local Intranet" zone, there is very little reason to include it and, according to Microsoft's best practice recommendations, absolutely no reason to include it in the HTML itself. (You should place it in your server config or site headers.)

If you are considering using X-UA-Compatible anywhere in your project, you should remember that the "Compatibility View" logic which uses it is only included in IE8, IE9 and IE10. (It was only introduced in IE8 and was disabled in IE11.)

Also be aware that IE11 is the only officially supported version of IE at this time (EOL support is scheduled for June 15, 2022). All older versions of IE should be considered insecure and not be used.

If that wasn't enough reason to convince you not to use it, consider that Microsoft state that IE8 and above already automatically render in Standards Mode when a <!DOCTYPE is present, making it even more pointless.

You can see for yourself the flow that IE takes to decide what document mode to use:

Sample Image
Sample Image

As you can see, if no X-UA-Compatible meta tag or HTTP header is present, it checks the user's "Compatibility View" settings. If the user doesn't have any for your website, IE then checks for the presence of a <!DOCTYPE declaration. If it finds one it automatically uses the latest Standards Mode (aka "EmulateIEx"). If it doesn't, it reverts to Quirks Mode.

Even more reasons why you shouldn't use the "X-UA-Compatible" meta tag from Microsoft themselves (emphasis mine):

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.

In other words, It slows initial page render

The X-UA-Compatible directive is a tool to allow applications to work in the latest Internet Explorer version while updates are made to the application.

It was only ever designed for temporary use.

The best practice is an X-UA-Compatible HTTP Header. Adding the directive to the response header tells Internet Explorer what engine to use before parsing content begins. This must be configured in the web site's server.

In other words, there's better ways of implementing X-UA-Compatible if you absolutely need it.

Starting from 12 January 2016, only the most current version of Internet Explorer available for a supported operating system will receive technical supports and security updates. Internet Explorer 11 is the last version of Internet Explorer, and will continue to receive security updates, compatibility fixes and technical support on Windows 7, Windows 8.1 and Windows 10.

IE11 is the only officially supported version of IE.

The only reason to include the X-UA-Compatible meta tag in your HTML was to override a user's "Compatibility View" settings in IE8, 9 and 10 for your website. In almost every case the user will not have changed these settings (why would they?), and now those browsers are not even supported anymore.

In short: You should never need to include this tag.

What will this do: meta http-equiv=X-UA-Compatible content=IE=edge?

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.

X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode

If you need to override IE's Compatibility View Settings for intranet sites you can do so in the web.config (IIS7) or through the custom HTTP headers in the web site's properties (IIS6) and set X-UA-Compatible there. The meta tag doesn't override IE's intranet setting in Compatibility View Settings, but if you set it at the hosting server it will override the compatibility.

Example for web.config in IIS7:

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

Edit: I removed the clear code from just before the add; it was an unnecessary oversight from copying and pasting. Good catch, commenters!

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

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)

Is it still valid to use IE=edge,chrome=1?

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> serves two purposes.

  1. IE=edge: specifies that IE should run in the highest mode available to that version of IE as opposed to a compatability mode; IE8 can support up to IE8 modes, IE9 can support up to IE9 modes, and so on.
  2. chrome=1: specifies that Google Chrome frame should start if the user has it installed

The IE=edge flag is still relevant for IE versions 10 and below. IE11 sets this mode as the default.

As for the chrome flag, you can leave it if your users still use Chrome Frame. Despite support and updates for Chrome Frame ending, one can still install and use the final release. If you remove the flag, Chrome Frame will not be activated when installed. For other users, chrome=1 will do nothing more than consume a few bytes of bandwidth.

I recommend you analyze your audience and see if their browsers prohibit any needed features and then decide. Perhaps it might be better to encourage them to use a more modern, evergreen browser.

Note, the W3C validator will flag chrome=1 as an error:

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.

IE 8 still running compatibility mode even http-equiv=X-UA-Compatible content=IE=edge, chrome=1

I know this is late to the game, but I just had this problem.
This is/was for an intranet site with compatibility mode forced on and the compatibility mode button disabled.

Removing the DOCTYPE attribute corrected the forced compatibility mode.

Lodlaiden



Related Topics



Leave a reply



Submit