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.
To make this line work as expected, make sure that:
<head>
<html>
elementOtherwise 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:
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.
Doing this is just like adding any other IE conditional statement and only works for IE and no other browsers will be affected.
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 ofDOCTYPE
. There’s also a checkbox to use Compatibility View for all websites, regardless ofDOCTYPE
.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:DOCTYPE
alone cannot do that; you will end up in one of the Compatibility View modes in these cases regardless ofDOCTYPE
.If both the
meta
tag and the HTTP header are specified, themeta
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:
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.
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.
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 will be released after IE11, will only honor theX-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 documenthead
:Here are your options:
To attempt to understand what each means, here are definitions provided by Microsoft:
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:
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: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:But for that plug-in to work you must use
chrome=1
in theX-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 haveIE=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.