Force Internet Explorer 9 to use IE 9 Mode

internet-explorer internet-explorer-9 cross-browser doctype

54,222

Solution 1

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.

Solution 2

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

Solution 3

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.

Solution 4

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

Solution 5

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.

View more solutions

54,222

Author by

Johnny Oshika

I’m a serial entrepreneur and a passionate software architect! I co-founded 3 companies (BC Jobs, Jobcast, PropertyInsight) and got lucky and sold 2 of them. I’m always learning and upgrading my skills, so if you're innovating on a cool new project, I'd love to hear from you! Message me on LinkedIn (https://www.linkedin.com/in/johnnyoshika/) or find me on GitHub (https://github.com/johnnyoshika).

Updated on July 05, 2022

Comments

Johnny Oshika almost 2 years

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?

mike__t about 12 years

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.
Johnny Oshika about 12 years

Yes, I came to the same conclusion. It must be declared in the HTTP header.
shorif2000 about 11 years

What do you mean http header, I have same problem, If i put it in the meta in head section nothing happens
Johnny Oshika about 11 years

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 <!DOCTYPE html> ...
davidjb about 11 years

This does not work for me. Adding the header in the above answer was the only solution.
PinoyStackOverflower over 10 years

Sample code please, what's an HTTP Header? Where is that located?
Johnny Oshika over 10 years

@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).
Cees Timmerman about 9 years

Why is that content-type meta tag outside of the head?