77

I am wondering how do you stop people who are using IE 8 from going to Compatibility mode?

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

I found this tag and I think this forces people to stay in IE-8 mode but I am not too sure and can't check as I have IE 9.

If people are in IE 9 mode I force them to not go into IE 8 or IE 7 Compatibility mode?

I tried to put the above line in my code and went to IE 9 -> Tools -> Compatibility View(Grayed Out)

but "Compatibility View Settings" was not grayed out and it seems you could add the site through there.

So should that not disable?

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
chobo2
  • 83,322
  • 195
  • 530
  • 832
  • 15
    @Sparky672 - yes I do. I don't support IE 7 and display a browser is out of date warning. What I found through usability studies most people do not release that they might be in compatibility mode(and have actually no knowledge of them setting it on) and when you tell them their browser is out of date and they think they are using IE 8(latest browser at the time of the study) they get confused very fast. Best solution is to force them back to IE 8/9(to what they probably think they are running anyways) – chobo2 Jun 14 '11 at 21:19

8 Answers8

91

All you need is to force disable C.M. in IE - Just paste This code (in IE9 and under c.m. will be disabled):

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

Source: http://twigstechtips.blogspot.com/2010/03/css-ie8-meta-tag-to-disable.html

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
FelixFett
  • 911
  • 6
  • 2
  • 3
    This saved me with Twitter Bootstrap & IE Compatibility. FYI - This needs to be the FIRST meta tag. – nope_four Oct 21 '13 at 14:30
  • 11
    Isn't this the same as ? – eug Dec 26 '13 at 05:18
  • 4
    take care not to use any conditional comments before this tag. Otherwise it's not working! Found the hint there: http://stackoverflow.com/questions/3449286/force-ie-compatibility-mode-off-in-ie-using-tags#comment26890406_3449338 – Karl Adler Mar 26 '14 at 14:51
74

This should be enough to force an IE user to drop compatibility mode in any IE version:

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

However, there are a couple of caveats one should be aware of:

  • The meta tag above should be included as the very first tag under <head>. Only the <title> tag may be placed above it.

If you don't do that, you'll get an error on IE9 Dev Tools: X-UA-Compatible META tag ignored because document mode is already finalized.

  • If you want this markup to validate, make sure you remember to close the meta tag with a /> instead of just >.

  • Starting with IE11, edge mode is the preferred document mode. To support/enable that, use the HTML5 document type declaration <!doctype html>.

  • If you need to support webfonts on IE7, make sure you use <!DOCTYPE html>. I've tested it and found that rendering webfonts on IE7 got pretty unreliable when using <!doctype html>.

The use of Google Chrome Frame is popular, but unfortunately it's going to be dropped sometime this month, Jan. 2014.

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

Extensive related info here. The tip on using it as the first meta tag is on a previously mentioned source here, which has been updated.

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
Wallace Sidhrée
  • 11,221
  • 6
  • 47
  • 58
  • I don't see "X-UA-Compatible META tag ignored" message, but it uses IE7 mode. When I moved this tag up - most of the time it uses IE11, but sometimes still IE7. – Maxim Mazurok Sep 08 '21 at 05:45
50
<meta http-equiv="X-UA-Compatible" content="IE=8" />

should force your page to render in IE8 standards. The user may add the site to compatibility list but this tag will take precedence.

A quick way to check would be to load the page and type the following the address bar : 

javascript:alert(navigator.userAgent)

If you see IE7 in the string, it is loading in compatibility mode, otherwise not.

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
Sriranga Chidambara
  • 730
  • 5
  • 4
  • 2
    What happens if their using IE 9 will this set them to IE 8? – chobo2 Jun 15 '11 at 15:44
  • 1
    If user is using it in IE9 it will display it in IE8 standards mode. You can also use the F12 Developer Toolbar in IE9 to verify it. – Sriranga Chidambara Jun 15 '11 at 21:31
  • 92
    Better use Also if the site is hosted on what Microsoft considers to be "Intranet" you're screwed, it will still display in Compatibility View. Only way to override that is to uncheck "Display Intranet sites in Compatibility View" checkbox in Tools - Compatibility View settings. That default setting in IE8+ really stinks. – oldwizard Dec 02 '11 at 10:28
  • 5
    I second that. Just got bit by the "Display Intranet sites in Compatibility View" default setting (in IE9 in my case). – Derek Morrison Feb 16 '12 at 21:11
  • 4
    I have the "Display Intranet Sites in Compatibility View" checked, but the X-UA-Compatible meta tag seems to be overriding it. – Justin Skiles Feb 08 '13 at 14:17
  • 1
    @SrirangaChidambara: I have the meta statement after the before other tags, I hit F12, but IE9 developer toolbar still says "IE9" mode, not IE8. IE10 still says IE10, not IE8. – frumbert Jun 27 '13 at 02:04
  • To get to "Display Intranet sites in Compatibility View", press ALT, Tools. Spent a while banging my head clicking tools in DevTools – Stuart Dobson Oct 24 '13 at 00:10
  • @JustinSkiles did you ever figure out why your meta tag was able to override your `Display Intranet Sites in Compatibility View` settings? It seems for some people this works, but for others like me, I must manually go in and uncheck that IE setting regardless of whether I include the meta tag. – Kyle Vassella Oct 02 '18 at 14:24
9

If you're using ASP.NET MVC, I found Response.AddHeader("X-UA-Compatible", "IE=edge,chrome=1") in a code block in _Layout to work quite well:

@Code
    Response.AddHeader("X-UA-Compatible", "IE=edge,chrome=1")
End Code
<!DOCTYPE html>
everything else
Sami Lamti
  • 215
  • 2
  • 10
5

The answer given by FelixFett worked for me. To reiterate:

<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />

I have it as the first 'meta' tag in my code. I added 10 and 11 as those are versions that are published now for Internet Explorer.

I would've just commented on his answer but I do not have a high enough reputation...

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
astburyj
  • 83
  • 1
  • 5
3

Another way to achieve this in Apache is by putting the following lines in .htaccess in the root folder of your website (or in Apache's config files).

BrowserMatch "MSIE" isIE
BrowserMatch "Trident" isIE
Header set X-UA-Compatible "IE=edge" env=isIE

This requires that you have the mod_headers and mod_setenvif modules enabled.

The extra HTTP header only gets sent to IE browsers, and none of the others.

Simon East
  • 55,742
  • 17
  • 139
  • 133
1

In JSF I used:

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    </f:facet>

    <!-- ... other meta tags ... -->

</h:head>
naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
miso
  • 11
  • 1
0

Adding a tag to your page will not control the UI in the Internet Control Panel (the dialog that appears when you selection Tools -> Options). If you're looking at your homepage which could be google.com, msn.com, about:blank or example.com, the Internet Control Panel has no way of knowing what the contents of your page may be, and it will not download it in the background.

Have a look at this document on MSDN which discussed compatibility mode and how to turn it off for your site.

i_am_jorf
  • 53,608
  • 15
  • 131
  • 222