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

Internet ExplorerIe8 Compatibility-ModeX Ua-Compatible

Internet Explorer Problem Overview

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?

Internet Explorer Solutions

Solution 1 - Internet Explorer

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 - Internet Explorer

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 - Internet Explorer

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 - Internet Explorer

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.

Solution 5 - Internet Explorer

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

Solution 6 - Internet Explorer

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

Solution 7 - Internet Explorer

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.

Solution 8 - Internet Explorer

X-UA-Compatible will only override the Document Mode, not the Browser Mode, and will not work for all intranet sites; if this is your case, the best solution is to disable "Display intranet sites in Compatibility View" and http://www.danielclasson.com/guide-how-to-force-specific-sites-to-always-run-in-compatibility-view-using-group-policy/">set a group policy setting to specify which intranet sites need compatibility mode.

Solution 9 - Internet Explorer

I added the following to my htaccess file, which did the trick:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie

Solution 10 - Internet Explorer

Additionally, X-UA-Compatible must be the first meta tag in the head section

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

By the way, the correct order or the main head tags are:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <title>Site Title</title>
    <!-- other tags -->
</head>

This way

  1. we set the render engine to use before IExplorer begins to process
  2. the document then we set the encoding to use for all browser
  3. then we print the title, which will be processed with the already defined encoding.

Solution 11 - Internet Explorer

Timmy Franks had it right for me. We just had the issue today where the client had IE8 company-wide, and it was forcing the site we wrote for their intranet into compatibility mode. Setting "IE-Edge" seemed to fix it.

<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=Edge" />
  </customHeaders>
</httpProtocol>

Solution 12 - Internet Explorer

For Nginx,

add_header "X-UA-Compatible" "IE=Edge,chrome=1";

ref : https://github.com/h5bp/server-configs/commit/a5b0a8f736d68f7de27cdcb202e32975a74bd2c5

Solution 13 - Internet Explorer

IE 11 doesn't allow you to override the browser compatibility view setting anymore by sending the header...

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

It appears the only way to force the browser to not use compatibility view is to have the user disable it in their browser. Ours is an Intranet site, and the default IE option is to use compatibility view for Intranet sites. What a pain!

We were able to prevent the need for the user to change their browser settings for users of IE 9 and 10, but it no longer works in IE 11. Our IE users are switching to Chrome, where this is not a problem, and never has been.

Solution 14 - Internet Explorer

I was able to get around this loading the headers before the HTML with php, and it worked very well.

<?php 
header( 'X-UA-Compatible: IE=edge,chrome=1' );
header( 'content: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' );
include('ix.html');
?>

ix.html is the content I wanted to load after sending the headers.

Solution 15 - Internet Explorer

I was experiencing the same issue in IE11. None of these answers solved my issue. After digging a bit, I noticed that the browser was running in Enterprise mode. (verify by hitting F12 and click the emulation tab, look for browser profile dropdown) The setting was locked, not allowing me to change the setting.

I was able to change the profile to Desktop after deleting CurrentVersion from the following registry key:

HKEY_CURRENT_USER\Software\Policies\Microsoft\Internet Explorer\Main\EnterpriseMode

After changing the mode to Desktop the answers on this post will work.

Solution 16 - Internet Explorer

When your browser opens with Compatibility Modes, even you remove and turn off all compability modes configuration from your web browser and Local Group Policy Editor, you can try to disable from register key.

This also happen to me on using domain and sub-domain to connect server side. The machine is restricted to open in compability mode for all sub-domain.

DISABLE COMPABILITY MODE FOR INTRANET

HKEY_LOCAL_MACHINE - SOFTWARE - Policies - Microsoft - Internet Explorer - BrowserEmulation -> IntranetCompalityMode Value should be 0 (zero). And also remove existing domain name from PolicyList.

Otherwise, you can add a new value (DWORD) that contain 0 (zero) value data.

Solution 17 - Internet Explorer

I had the same issue after trying many combination I had this working note I have compatibility checked for intranet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head runat="server">

Solution 18 - Internet Explorer

If you are using LAMP stack, then add this into your .htaccess file in your web root folder. No need to add it to every PHP file.

<IfModule mod_headers.c>
	Header add X-UA-Compatible "IE=Edge"
</IfModule>
Categories
Recommended Internet Explorer Solutions
Recommended Ie8 Compatibility-Mode Solutions
Recommended X Ua-Compatible Solutions

Previous Solution:

Extension methods must be defined in a non-generic static class

C#.NetLinqExtension MethodsCompiler Errors

Next Solution:

Formatting a float to 2 decimal places

C#VariablesFloating PointDecimal

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKerrickView Question on Stackoverflow
Solution 1 - Internet ExplorerTim FranklinView Answer on Stackoverflow
Solution 2 - Internet ExplorerneoswfView Answer on Stackoverflow
Solution 3 - Internet ExplorerTJ LView Answer on Stackoverflow
Solution 4 - Internet ExplorerKerrickView Answer on Stackoverflow
Solution 5 - Internet ExplorerPramodView Answer on Stackoverflow
Solution 6 - Internet ExplorerrshadmanView Answer on Stackoverflow
Solution 7 - Internet Exploreruser1010892View Answer on Stackoverflow
Solution 8 - Internet ExplorerTonyView Answer on Stackoverflow
Solution 9 - Internet ExplorerMetzedView Answer on Stackoverflow
Solution 10 - Internet ExplorerLeonardo MolinaView Answer on Stackoverflow
Solution 11 - Internet ExplorerSouthShoreAKView Answer on Stackoverflow
Solution 12 - Internet Explorerz2zView Answer on Stackoverflow
Solution 13 - Internet ExplorerEricPView Answer on Stackoverflow
Solution 14 - Internet Exploreruser3071843View Answer on Stackoverflow
Solution 15 - Internet ExplorerjfatalView Answer on Stackoverflow
Solution 16 - Internet ExplorerayciceksametView Answer on Stackoverflow
Solution 17 - Internet ExplorercapadlemanView Answer on Stackoverflow
Solution 18 - Internet ExplorerKevin SmithView Answer on Stackoverflow