What is the point of X-UA-Compatible?

Question

I don't understand at all what <meta http-equiv="X-UA-Compatible" content="..." /> is for...

Can someone explain...

• What it does for different values of content ?
• What omitting it does for different browsers?
• What the motivation for it is?
• Why it exists?

Answer 1

This meta tag (or http header) only has meaning for IE8 and up. It is a way to force IE to render the page as an older version would have. Omitting it has no effect, it only as effect if used.

Possible values are "IE=" followed by any of the following:

• Edge - Render as whatever the latest version of IE is
• IE9 - Render as IE9 in standards mode
• Emulate IE9 - Render as IE9 but use the <!DOCTYPE> to determine the mode
• IE8 - Render as IE8 in standards mode
• Emulate IE8 - Render as IE8 but use the <!DOCTYPE> to determine the mode
• IE7 - Render as IE7 in standards mode
• Emulate IE7 - Render as IE7 but use the <!DOCTYPE> to determine the mode
• IE5 - Render as IE7 in quirks mode

Additionally, you can add a comma followed by Chrome=1 to tell IE to render the page using Google Chrome Frame if it is installed. So you might have a tag that looks like this:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Or, instead of that, you can also specify to use GCF for for a specific version of IE and below like this:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">

Which means to use GCF if it is installed and IE is at version 8 or below otherwise, render as the latest installed version of IE.

So, it's obvious that it is useful to be able to make older versions of IE use GCF but that was probably not Microsoft's intention when they implemented this. It can be used for compatibility with old sites that only work in older versions of IE and can't be easily fixed but that's kind of silly. Personally, I find it useful for testing. Since it's generally not so simple to test multiple versions of IE from a single development machine, this provides a decent solution.

Answer 2

It's a horrible hack to cater for different bugs or incomplete implementations in various versions of the Internet Explorer browser. For example, this:

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

will instruct IE9 to pretend it's really IE7 to avoid any problems that might occur if your site works in IE7 but not IE9.

Answer 3

<meta http-equiv="X-UA-Compatible" content="..."> is a meta tag that specifies the document mode for Internet Explorer and allows web authors to choose the specific document mode for the Internet Explorer browser according to which the page should be rendered. It was first used by Internet Explorer 8 to specify whether a page should be rendered as IE7 document mode (compatibility view) or IE8 document mode (standards view).

X-UA-Compatible (HTTP header) value "IE=edge" 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.

For example, in Windows Internet Explorer 8, IE=9, IE=edge, and IE=EmulateIE9 result in IE8 mode.

X-UA-Compatible (HTTP header) value "IE=edge" forces a web page to be opened in standards mode.

By default, Windows Internet Explorer 8 uses IE8 mode, Windows Internet Explorer 9 uses IE9 mode, etc.

X-UA-Compatible value "IE=5" refers to Quirks Mode or IE5 document mode.

X-UA-Compatible value "IE=7" refers to IE7 document mode.

Webpages that include a meta tag with an http-equivalent value of X-UA-Compatible can enable this functionality. But this functionality will not get implemented in any version of Microsoft Edge.

If you use the X-UA-Compatible HTTP header to target an old legacy document mode, your website won't reflect the best experience available.

Starting with Internet Explorer 11, content values bigger than "10" lead to EdgeHTML mode, which is the highest supported document mode by the Internet Explorer 11 to render the webpage accordingly.

The content attribute contains the value for the http-equiv or name attribute, depending on which is used.

All allowed values of the http-equiv attribute are names of particular HTTP headers.

The name and content attributes provide document metadata in terms of name-value pairs. The name attribute gives the metadata name, and the content attribute gives the value.

If you need to support IE10 (Internet Explorer 10), IE9, IE8, or older versions of the Internet Explorer, I would recommend using this meta tag with an appropriate value to an X-UA-Compatible HTTP header. But if you only support the latest browsers like IE11 or Edge, I would consider dropping this tag altogether.