Force Internet Explorer 9 to use IE 9 Mode

Question

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?

For those who can't use HTTP header: I've read that the `http-equiv="X-UA-Compatible"` meta tag has to be the **very first** tag in the `` section. The order for HTTP headers is not important. — netzaffin, May 22 '13 at 12:07

Johnny Oshika · Accepted Answer · 2014-02-03T05:04:50.060

26

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.

edited Feb 03 '14 at 05:04

answered Feb 07 '12 at 19:39

Johnny Oshika

54,741
40
181
275

I included this string in a meta like so many sites suggest, but it had no effect there. Putting it in an HTTP header seems to be the only way that works reliably. – mike__t Apr 11 '12 at 23:11
Yes, I came to the same conclusion. It must be declared in the HTTP header. – Johnny Oshika Apr 12 '12 at 00:48
What do you mean http header, I have same problem, If i put it in the meta in head section nothing happens – shorif2000 Mar 11 '13 at 14:52
Putting it in the meta tag within the head tag isn't enough. You need to put it in the HTTP Header. For example, your HTTP response will need to be something like this: HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 X-UA-Compatible: IE=edge,chrome=1 Date: Wed, 13 Mar 2013 16:11:35 GMT Content-Length: 4572 ... – Johnny Oshika Mar 13 '13 at 16:16
Sample code please, what's an HTTP Header? Where is that located? – PinoyStackOverflower Sep 25 '13 at 05:57
@ElsonSolano, HTTP Header is the text above the response body. For example, if the response body is HTML, then the headers are what are listed above the HTML. The code to alter the HTTP headers will be dependent on the server-side language you're using (e.g. PHP, C#, etc). – Johnny Oshika Sep 25 '13 at 21:30

score 9 · Answer 2 · answered Nov 14 '12 at 18:12

9

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

answered Nov 14 '12 at 18:12

Matěj Polák

182
3
10

This does not work for me. Adding the header in the above answer was the only solution. – davidjb Mar 18 '13 at 23:46

score 5 · Answer 3 · edited May 23 '17 at 11:53

5

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.

edited May 23 '17 at 11:53

Community

1
1

answered Jul 10 '14 at 22:42

jhiller

211
2
4

score 3 · Answer 4 · edited Jul 16 '13 at 07:58

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" />

score 1 · Answer 5 · answered Sep 03 '13 at 17:21

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.

score 0 · Answer 6 · answered May 22 '13 at 22:57

0

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

answered May 22 '13 at 22:57

Branka Kranjac

11
1

score 0 · Answer 7 · answered Dec 15 '14 at 13:44

0

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" />

answered Dec 15 '14 at 13:44

Sagar Ranpise

911
1
7
9

1

Why is that content-type meta tag outside of the head? – Cees Timmerman Feb 02 '15 at 16:17

Force Internet Explorer 9 to use IE 9 Mode

7 Answers7

Linked