How can I disable the Compatibility Mode button in IE9?

Question

I cannot disable the IE Compatibility mode button in IE9.

My head and doctype look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lte IE 8]> 
  <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en" class="ie8">
 <![endif]-->
<!--[if IE 9]> 
  <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en" class="ie9">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en">
<!--<![endif]-->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="meta content here" />
  </head>
  <body>
    <!-- page content here //-->
  </body>
</html>

How do I disable the compatibility mode button in IE9?

I thought I did my research. I applied every kind of fallback solution to display everything fine in every IE from 7 to 9 and up.

The client is complaining about the compatibility mode that when activated, it messes up the layout. Is there any way to disable that button?

score 18 · Answer 1 · edited May 23 '17 at 10:31

18

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

Chrome frame has been discontinued by Google as of Jan 2014 so the chrome=1 part is not required

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

The "edge" forces standards mode (or latest rendering engine) in IE and the "chrome" is for Chrome Frame.

Further info available here:

edited May 23 '17 at 10:31

Community

1
1

answered May 17 '12 at 16:03

Simon

641
5
15

4

I finally got this to work (although I didn't include the `chrome` bit), when I moved this tag up to the *very first thing* after `` – Michael Mar 12 '13 at 15:33
1

The location within `` shouldn't matter. But the conditional tags such as ` – goddogsrunning May 08 '13 at 03:15

score 5 · Answer 2 · edited Dec 04 '17 at 15:39

I was using conditional comments at the top of the page to embed an ie class based on version. (eg:)

<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->

As a result, even though I was setting the X-UA-Compatible meta tag, the Compatability Mode button was still being shown in IE.

To fix, I had to move the conditional comments to the bottom of the page and use JS to apply the ie classes. The Compatibility button is no longer shown in IE when viewing my site.

<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10; IE=EDGE; chrome=1">
  <head>
  <body>
     <!-- ..Other content... -->
  <script type="text/javascript">
   window.flagAsIE = function(version) {
     var cls = document.body.parentElement.getAttribute('class');
     document.body.parentElement.setAttribute('class', "ie ie" + version + " " + cls);
   };
  </script>

  <!--[if lt IE 7 ]><script type='text/javascript'>flagAsIE('6');</script><![endif]-->
  <!--[if IE 7 ]><script type='text/javascript'>flagAsIE('7');</script><![endif]-->
 </body>
</html>

score 4 · Answer 3 · answered Jul 30 '11 at 08:20

4

Here's the answer:

http://blogs.msdn.com/b/jonbox/archive/2011/03/27/removing-the-ie9-compatibility-button-and-html1115-warning.aspx

Change the order of your meta tags.

answered Jul 30 '11 at 08:20

Dan Grossman

49,405
10
105
95

The problem persists. Even if I change it to: ` ` – Cyrax Jul 30 '11 at 09:21
Did you check for any similar messages in the console? That you're using conditional comments to declare the HTML tag raises flags for me. – Dan Grossman Jul 30 '11 at 09:26
2

I'm using a solution proposed by Paul Irish as a way to deal with x-browser compatibility. Only tags targetting particula browser get parsed. No messages popup in console. – Cyrax Jul 30 '11 at 10:40
The article you linked to in turn further links to a SVG with the workflow diagram for deciding which mode to use. Since it is 404, I've got it from Archive.org and [put the SVG here](http://pastebin.com/cgvVfFq9), the [resulting PNG image here](http://i.imgur.com/iqb3RsF.png). – Uwe Keim Dec 08 '13 at 20:44

score 1 · Answer 4 · edited Dec 04 '17 at 15:03

I found that it was the conditional comments that were causing the button to appear. Removing these and using feature detection instead to add my html classes has solved this problem. No amount of tinkering with the X-UA-Compatible stuff would remove the button.

I've used this set of has.js detects:

if (has("css-border-radius") && !has("input-attr-placeholder")) {
    html.className += ' ie9';
}

if (!has("css-border-radius") && !has("input-attr-placeholder")) {
    html.className += ' lt-ie9';
}

if (!has("css-box-sizing")) {
    html.className += ' ie7';
}

score 0 · Answer 5 · answered Jan 15 '13 at 09:56

The Problem is that somewhere in your js code you are using browser sniffing code like document.all, window.ActiveXObject, navigatror.userAgent, attachEvent, detachEvent etc.

Replace everything with feature detection code using jquery.support and the button will disapear.

How can I disable the Compatibility Mode button in IE9?

5 Answers5