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

I am quite confused. I should be able to set

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

and IE8 and IE9 should render the page using the latest rendering engine. However, I just tested it, and if Compatibility Mode is turned on elsewhere on our site, it will stay on for our page, even though we should be forcing it not to.

How are you supposed to make sure IE does not use Compatibility Mode (even in an intranet)?

FWIW, I am using the HTML5 DocType declaration (<!doctype html>).

Here are the first few lines of the page:

<!doctype html> 
<!--[if lt IE 7 ]> <html lang="en" class="innerpage no-js ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="en" class="innerpage no-js ie7"> <![endif]--> 
<!--[if IE 8 ]>    <html lang="en" class="innerpage no-js ie8"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> 
<html lang="en" class="innerpage no-js"> 
<!--<![endif]--> 
    <head> 
        <meta charset="ISO-8859-1" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

EDIT: I just learned that the default setting on IE8 is to use IE7 compatibility mode for intranet sites. Would this override the X-UA-Compatible meta tag?

Solution 1:

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!

Solution 2:

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.

Compatibility view settings

Solution 3:

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

Solution 4:

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.

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

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts