How can I disable the Compatibility Mode button in IE9?

Asked 30/7, 2011 at 8:16 Answered 15/5, 2013 at 1:32

cross-browser internet-explorer-9 ie8-compatibility-mode x-ua-compatible

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?

Limulus answered 30/7, 2011 at 8:16 Comment(0)

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

Anagrammatize answered 17/5, 2012 at 16:3 Comment(2)

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 <head> – Pantoja 12/3, 2013 at 15:33

The location within <head> shouldn't matter. But the conditional tags such as <!--[if gte IE 8]> will interfere with the proper meta tag, so don't use them. The meta that causes the compatibility mode button to disappear (tested in IE10 on Windows 7) is <meta http-equiv="X-UA-Compatible" content="IE=edge"> – Choreography 8/5, 2013 at 3:15

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>

Soutache answered 15/5, 2013 at 1:32 Comment(0)

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.

Exercitation answered 30/7, 2011 at 8:20 Comment(4)

The problem persists. Even if I change it to: <head> <meta http-equiv="X-UA-Compatible" content="IE=9"> – Limulus 30/7, 2011 at 9: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. – Exercitation 30/7, 2011 at 9:26

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. – Limulus 30/7, 2011 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, the resulting PNG image here. – Bengali 8/12, 2013 at 20:44

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';
}

Burnish answered 25/4, 2013 at 9:8 Comment(0)

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.

Nosology answered 15/1, 2013 at 9:56 Comment(0)

Recommended topics

Hot tags