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