Menu
After the IE11 desktop application is retired and goes out of support on June 15, 2022, the IE desktop application will be progressively redirected to Microsoft Edge over the following months, and ultimately disabled via Windows Update, to help ensure a smooth retirement.
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.
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. X-UA-Compatible Meta Tag Type: The X-UA-Compatible meta tag is a http-equiv meta tag.
Open up Internet Explorer (IE 11) Press the Alt key on your keyboard, this will make a menu bar appear. Click on the Tools menu tab. Select the Compatibility View settings option.
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!
Server Side solution is the recommended one, as @TimmyFranks proposed in his answer, but if one needs to implement the X-UA-Compatible rule on the page level, please read the following tips, to benefit from the experience of the one who already got burned
The X-UA-Compatible meta tag must appear straight after the title in the <head> element. No other meta tags, css links and js scripts calls can be placed before it.
<head>
<title>Site Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<script type="text/javascript" src="/jsFile.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="shortcut icon" href="/apple-touch-icon.png" />
</head>
If there are any conditional comments in the page (lets say located in the <html>), they must be placed under, after the <head>.
// DON'T: place class inside the HTML tag
<!--[if gt IE 8]><!-->
<html class="aboveIe8">
<!--<![endif]-->
// DO: place the class inside the BODY tag
<!--[if gt IE 8]><!-->
<body class="aboveIe8">
<!--<![endif]-->
Html5BoilerPlate's team wrote about this bug - http://h5bp.com/i/378 They have several solutions.
Regarding Intranet & Compatibility view, there're settings when you go to tools > Compatibility view settings.
Note that if you are serving it from PHP, you can use the following code to fix it as well.
header("X-UA-Compatible: IE=Edge");
As it turns out, this has to do with Microsoft's "intelligent" choice to make all intranet sites force to compatibility mode, even if X-UA-Compatible is set to IE=edge.
I also got the same issue of IE9 rendering in IE7 Document standards for local host. I tried many conditional comments tags but unsuccesful. In the end I just removed all conditional tags and just added meta tag immediatly after head like below and it worked like charm.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Hope it helps
Even if you have unchecked the "Display intranet sites in Compatibility View" option, and have the X-UA-Compatible in your response headers, there is another reason why your browser might default to "Compatibility View" anyways - your Group Policy. Look at your console for the following message:
HTML1203: xxx.xxx has been configured to run in Compatibility View through Group Policy.
Where xxx.xxx is the domain for your site (i.e. test.com). If you see this then the group policy for your domain is set so that any site ending in test.com will automatically render in Compatibility mode regardless of doctype, headers, etc.
For more information, please see the following link (explains the html codes): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx
As NEOSWF points out above, the Paul Irish conditional comments stops the meta tag having any affect.
There are several fixes all here (http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/)
These include:
Adding two HTML classes, using server headers and adding a conditional comment above the doctype.
On my latest project I decided to remove the Paul Irish conditional comments. I didn't like the idea of adding anything before the html without doing LOTS of testing first and it's nice to see what has been set just by looking at the HTML.
In the end I surrounded a div straight after the body and used conditional comments eg
<!--[if IE 7]><div class="ie7"><!--<![endif]-->
... regular body stuff
<!--[if IE 7]></div><!--<![endif]-->
I could have done this around the body but its more difficult with CMSs like Wordpress.
Obviously its another DIV inside the markup, but its only for older browsers.
I think it could be a per project based decision though.
I've also read something about the charset meta tag needing to come in the first 1024 bytes so this ensures that.
Sometimes the simplest, easiest to read ideas are the best and its definitely worth thinking about! Thanks to the 6th comment on the link above for pointing this out.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With