Force Internet Explorer 9 to use IE 9 Mode

I'm using the HTML5 doctype with X-UA-Compatible meta tag near the top:

<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    ...

But Internet Explorer 9 for some users is rendering the page in compatibility view. I suspect it's because they have the "Display all websites in Compatibility View" setting turned on. Is there a way to force IE9 to use IE9 Browser and Document Mode?

Answers


It turns out that the solution is to set X-UA-Compatible in the HTTP header and not in the HTML:

 X-UA-Compatible: IE=edge,chrome=1

This will force Internet Explorer to use the latest rendering engine, even if "Display all websites in Compatibility View" is turned on.


It's also working with this in <head> in html:

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

The X-UA-COMPATIBLE meta tag has to be the first tag inside the head, or else it will not work. See this answer: https://stackoverflow.com/a/22233206/3329906.

All this http header stuff is overkill.


please append in head section of your website, hope it helps.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=5, IE=7, IE=8, IE=9, IE=10" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />

As JohnnyO says it has to be sent as a header. In PHP add this (before any other output is sent):

<?php header( 'X-UA-Compatible: IE=edge,chrome=1' ); ?>

In Wordpress this would probably be best if you put it as the very first line in your header.php file as long as you don't have any output (or errors) before that file is rendered it should work.

If you have errors being output to the browser you may want to tell errors to be logged only and not output to the screen by adding something like this to your application:

ini_set('display_errors', 0);
ini_set('log_errors', 1);

In Wordpress that could be added near the top of the wp-config.php file.

If you have caching enabled with something like WP SuperCache or W3 Total Cache all bets are off regarding the behavior of your site - you'll need to do some searching for how to add extra headers with your caching plugin.


@netzaffin is right - if X-UA-Compatible is the first meta tag in HEAD section, IE9 works.


Only adding

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

will do ;)

For eg:

<!DOCTYPE html>
<html lang="en-US" class="css3transitions"> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Need Your Help

DataGridView read only cells

c# datagridview

I have a binded DataGridView that contains a large amount of data. The problem is that some cells has to be ReadOnly and also when the user navigates with TAB or ENTER between cells, the ReadOnly c...

What is the difference between JAXP and JAXB?

java xml

What is the difference between JAXP and JAXB?