Question

According to HTML5 Boilerplate, I would expect the following included meta tag to remove the Compatibility Mode button from IE8:

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

But when I view my site in IE8, the compatibility mode button is still there. I want my site to work in IE8 and above and I do not want my visitor's IE browsers to show a compatibility mode button. The problem is that if someone clicks it by accident and turns on Compatibility mode in an IE8 browser, then my page doesn't render correctly because of weird IE7 quirks.

So how do I turn off the button?

EDIT:

Here is the beginning of my head tag:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

It's the same as default H5BP. I have also tried moving the compat. mode meta tag to be the first tag in <head> with no difference.

Was it helpful?

Solution

This has been going on for a long time (https://github.com/h5bp/html5-boilerplate/issues/1187). I use this (modify the classes below the doctype for your needs):

http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/

<!--[if IE ]><![endif]-->
<!doctype html>
<!--[if IE 8 ]> <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top