IE conditional comments around html tag adds Compat View icon to address bar #378

DingoEatingFuzz · 2011-03-14T17:12:13Z

Even though the doctype is HTML5 recommended and the X-UA-Compatible meta tag is present, by putting the HTML tag in a series of IE conditional comments, IE refuses to believe that the website is indeed "modern" and puts the dreaded "Compatibility View" button in the address bar.

The way I get around this is by using JavaScript to add the ie6/7/whatever classes.

Example:

<html class="no-js" lang="en">
...
<!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script> DD_belatedPNG.fix('img, .png_bg'); var ie = "ie6"; </script>
<![endif]-->        
<!--[if IE 7 ]> <script> var ie = "ie7"; </script> <![endif]-->
<!--[if IE 8 ]> <script> var ie = "ie8"; </script> <![endif]-->
...
if(typeof ie !== 'undefined') $('html').addClass(ie); // in js/script.js

I'm sure there are better ways to handle this, but this works as expected.

The text was updated successfully, but these errors were encountered:

chuanxshi · 2011-03-14T17:27:00Z

hmmm, i can't replicate the issue, would you mind provide a test case?

DingoEatingFuzz · 2011-03-14T18:12:12Z

Thanks for the quick update.

Here are a couple pages that isolate the problem:

Using comments (has compatibility view button)

Not using comments (no compatibility view button)

Themble is an example of a complete site with the problem:

Themble

I noticed that the html5-boilerplate site doesn't have the problem. It could also be htaccess related.

chuanxshi · 2011-03-14T18:27:20Z

yea, it happens without htaccess, there is the following in the htaccess that fixes this

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie

DingoEatingFuzz · 2011-03-14T18:37:20Z

It might be a good idea to note that on the site or in the documentation for the folks who aren't using Apache :)

gabor · 2011-03-18T08:45:06Z

hmm, maybe i'm misunderstanding something, but doesn't this mean that the
http-equiv=x-ua-compatible
solution in the html is useless?

if you have to put in the http header, then you do not need the html-tag...

MartinMa · 2011-03-18T23:50:14Z

I think so too. The X-UA-Compatible meta tag is in fact useless here and could as well be removed from index.html of the boilerplate. Why was this issue closed again?

DingoEatingFuzz · 2011-03-19T00:39:59Z

Not gonna lie: I accidentally closed it by clicking the "comment and close" button rather than the "comment" button. And now I don't know how to reopen it. Kind of a github noob.

From what I have noticed, the X-UA-Compatible meta tag in this scenario is useless, since without the htaccess redundancy, it doesn't work (or at least doesn't work fully). As mentioned originally, if the IE comments aren't wrapped around the html tag (they can still be used elsewhere) the meta tag works as expected. It seems to me like the HTML 5 boilerplate should be pushing for HTML(5) solutions. Not Apache ones.

paulirish · 2011-03-19T20:43:27Z

reopened..

paulirish · 2011-03-19T20:49:12Z

I just retitled the issue as "IE conditional comments around html tag adds Compat View icon to address bar"

Agreed this sucks. I don't think it'll make the 1.0 but let's figure out how best to address this for 1.1

paulirish · 2011-03-19T20:49:40Z

Also I could repro in IE9 RC.. I imagine this is also present in IE8 final? Can someone confirm?

DingoEatingFuzz · 2011-03-19T21:21:07Z

Confirmed: http://i.imgur.com/rChH7.jpg

ghost · 2011-03-20T03:47:38Z

The fix is as simple as getting that <meta http-equiv... /> in before the conditional comments. So to resolve it, we could do something like this:

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>ie test</title>
    </head>
    <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
    <!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
    <!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
        <p>test</p>
    </body>
</html>

But it might be worth mentioning that "X-UA-Compatible" is not valid HTML5, so I think it's perfectly acceptable to remove it all together.

MartinMa · 2011-03-20T09:58:26Z

I vaguely remember that there has been a reason for moving the conditional comments from the body tag to the html tag in the first place. Something with deferred loading of scripts in IE8?

Update: Ah, here it is http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/

MartinMa · 2011-03-20T11:27:14Z

A potential solution to this problem could be this arrangement:

    <!doctype html>
    <html class="no-js" lang="en">
        <head>
            <meta charset="utf-8">
            <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
            <title>Non-blocking downloads in IE8</title>
            <link rel="stylesheet" href="css/some.css">
            <link rel="stylesheet" href="css/random.css">
            <link rel="stylesheet" href="css/files.css">
            <!--[if IE 6 ]><link rel="stylesheet" href="css/and.css"><![endif]-->
            <link rel="stylesheet" href="css/a.css">
            <link rel="stylesheet" href="css/couple.css">
            <link rel="stylesheet" href="css/more.css">
            <link rel="stylesheet" href="css/huzzah.css">
        </head>
        <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
        <!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
        <!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
        <!--[if (gte IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
            <h1 style='color:green'>Non-blocking downloads in IE8.</h1>
        </body>
    </html>

This doesn't block downloads in IE 8 (see test cases below) and removes the compat view icon (only tested in current IE9).

Non-blocking: http://www.webpagetest.org/result/110320_MW_6S9X/

Blocking: http://www.webpagetest.org/result/110320_W1_6S9H/

P.S. As a plus it validates as HTML5 :)

gabor · 2011-03-21T08:40:04Z

maybe the documentation could be changed a little (assuming the http-header method is bulletproof).
currently in the html it is:

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

we could change the html-comment to say something like you-should-do-this-in-htaccess-only-do-it-in-html-if-you-cannot-do-that...

MartinMa · 2011-03-21T16:24:23Z

@gabor I agree, the http-header method should be the way to do this. Although Google planned to lobby validators to tolerate "X-*" http-equiv values and keys according to the comments on this issue here: http://code.google.com/p/chromium/issues/detail?id=22795

On another note, my sample code from above doesn't invoke chrome frame so it has to be changed to this (on line 5):

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if IE]><![endif]-->

The empty conditional comment is because of the blocking issue in IE8. This all is starting to get a little messy :)

irae · 2011-03-27T01:53:47Z

I also tested this issue and some combinations for resolving it. I believe that the better solution is to both move the conditional comments down and add the classes to with javascript:

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove meta X-UA-Compatible if you use the .htaccess -->

  <!--[if lt IE 7 ]> <script>document.documentElement.className+=' ie6';</script> <![endif]-->
  <!--[if IE 7 ]>    <script>document.documentElement.className+=' ie7';</script> <![endif]-->
  <!--[if IE 8 ]>    <script>document.documentElement.className+=' ie8';</script> <![endif]-->
  <!-- Always put your css and js below this line, see
       https://github.com/paulirish/html5-boilerplate/issues/issue/378 -->

  <title></title>

I've added a pull request with this solution. The only downside I can imagine is having to support IE < 9 with javascript disabled. And this would be such an edge case that pointing an URL to this issue should resolve the problem.

irae · 2011-03-27T01:57:05Z

I forgot to mention. AFAIK, Google Chrome frame docs advise putting the X-UA-Compatible as above in the document as possible. Since <meta charset="utf-8"> must be within the first 512 bytes it was necessary for it to be put before the X-UA-Compatible in previous versions.

So this time I changed the order, since the charset will not be affected by the conditional comments above it.

chuanxshi · 2011-04-16T17:49:30Z

@irae: it might be a nice idea, but is it too much of a hack? imo

ghost · 2011-04-18T04:36:20Z

I agree. I think the Javascript idea is very amateurish, especially since it seeks to resolve an issue caused by a piece of code that is not valid HTML5 in the first place. I would hate to see the HTML5 Boilerplate dragged away from the standards-compliance and best-practice foundation on which it was initially built.

Someone put in a pull request (might be the same guy; I don't remember) offering up the same bit of code. I would like to think that it isn't actually taken into serious consideration.

irae · 2011-04-19T15:13:12Z

I also agree that this is amateurish. But I have a project that I am writing the front end code and I will not have access to the server. I don't even know where they will host it, what technologies, etc. This is a solution, ugly as it is, that is working better then the current solution of conditional comments around the <html> tag. In this case I prefer this ugliness that's only comments to modern browsers to broken functionality.

If anyone comes up with a better idea, I will be glad to change in my working projects and remove my own pull request.

MartinMa · 2011-04-19T23:27:27Z

I noticed that my other comment on here is a bit distorted, so here are my two cents again.

Either remove the meta tag altogether and refer to .htaccess (or other server config files).
Or move the conditional comments down to the body tag. Like this:

    <!doctype html>
    <html class="no-js" lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <!--[if IE]><![endif]-->
            <title>Everybody here is a cloud</title>
        </head>
        <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
        <!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
        <!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
        <!--[if (gte IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
            <h1>Everybody here will evaporate</h1>
        </body>
    </html>

Like I said before, we need the empty conditional comment because of the newly introduced "IE8 blocking Issue".
See test cases for details on that:
Non-blocking: http://www.webpagetest.org/result/110320_MW_6S9X/
Blocking: http://www.webpagetest.org/result/110320_W1_6S9H/

Thoughts? I like this one better, because it involves no Javascript to add the classes.

edit: corrected a little slip in the code

necolas · 2011-04-19T23:47:48Z

@MartinMa: I think a problem with (2) is that a lot of CMS add id/classes to the body tag, which would create a lot of duplication. Furthermore, it could create problems for people writing IE6-specific styles because the browser doesn't really support chains of classes, e.g., ie6.mybodyclass {}

chuanxshi · 2011-05-10T17:47:44Z

or we remove 'h5bp stripped version' and make h5bp download rely more on boilerplate custom (aka initializr), if people tick the option to have conditional comments, then a warning says they must have the X-UA-Compatible in server config.

julienw · 2011-05-19T12:15:52Z

I use "" as the very first line in my HTML files.
Then I use the "useful" conditional comments after the X-UA-Compatible meta.

IE8 is still in "IE8 Standards Mode". Didn't try with IE9 and I don't know how to check in IE7.

My 2 cents.

necolas · 2011-05-19T12:25:21Z

ignore me

julienw · 2011-05-19T12:35:49Z

I don't get it. I said I'm in standards mode event with these comments before the tag.

But some comments in this bug are saying that if you use some conditional comments around , then IE goes to quirks mode.

necolas · 2011-05-19T12:58:14Z

@julienw Apologies, I misread your previous comment. If you open up IE8's dev tools, please can you check if you have "Browser Mode" set to "Internet Explorer 8" or "Internet Explorer 8 Compatibility View". If it's the former, it shouldn't drop the doc into IE7 Standards. If it's the later, it should drop the doc into IE7 Standards when using conditional comments outside of the opening html tag.

julienw · 2011-05-19T13:06:47Z

I just checked using "IE8 Compatibility View", and it's still IE8 standards.

paulirish · 2011-12-09T02:13:20Z

As this issue is referenced in our inline documentation, I wanted to add this extra data point:

@puresight found that..

To get IE 9 into edge mode on an intranet site, I had to send X-UA-Compatible as an HTTP Header--a meta wasn't enough

barkan · 2012-07-17T09:13:58Z

I hate to raise the dead, but is there any reason that this isn't an option for people who have to put the tag in their HTML so it still validates?

andvik · 2012-08-24T14:31:46Z

yes this is an old issue, but you could include a web.config file with the following for IIS users - or add it in a comment somewhere so they know what to do if they don't run apache:

  <system.web>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE8" />
      </customHeaders>
    </httpProtocol>
  </system.web>

I would personally lean towards just including a web.config file with it in. It wont affect the apache server, just as the .htaccess wont affect IIS. Wouldn't having this in a web.config remove the need for the tag?

andvik · 2012-08-24T14:37:58Z

ok - i feel silly now - there is already a web.config in the "Customize Boilerplate" section.

Anybody else finding this thread through a search for the solution - go customize your boilerplate and include "web.config" if your running ISS :)

djcsdy · 2012-08-30T17:36:47Z

This is all preposterous.

Just wrap and apply classes to <body> instead of wrapping <html>. Problem solved.

djcsdy · 2012-08-30T17:38:42Z

OK, so I skipped over some of the comments. Fair enough.

TheDutchCoder · 2012-09-11T12:50:48Z

Is there a reason why this is kept in boilerplate if it:

Doesn't work as expected / intended;
Really is a webserver configuration thing that has no place in a template.

I'd prefer it to be not in the mark-up at all, but if it must, then please have it commented out. People who choose to use it, can always add it in.

blaiseliu · 2012-09-11T17:15:29Z

andvik, isn't it supposed to be placed inside system.webServer?

like:

<system.webServer>
<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=edge" />
  </customHeaders>
</httpProtocol>
...

TheDutchCoder · 2012-09-11T17:18:01Z

blaiseliu: correct

andvik · 2012-09-11T17:31:30Z

blaiseliu: Yes, I believe you are right - good catch

garthvh · 2013-04-24T19:51:44Z

When IE sees conditional comments, it assumes the page is not standards compliant and kicks into compatibility mode overriding the meta tag value. Adding the value as a header in the httpProtocol section of the system.webServer section of the web.config is the only way I have consistently been able to force the browser to use the highest standards mode available on pages with conditional comments on them .

paulirish reopened this Mar 19, 2011

necolas mentioned this issue Feb 6, 2012

x-ua compat incompat #973

Closed

necolas mentioned this issue Jul 10, 2012

border-spacing issue in IE8 #1142

Closed

djcsdy mentioned this issue Aug 30, 2012

Conditional comments wrapping <html> prevent IE from honouring <meta http-equiv=X-UA-Compatible> #1187

Closed

patheard mentioned this issue Nov 19, 2012

WET renders incorrectly in IE9 from IIS6 in Intranet Zone wet-boew/wet-boew#669

Closed

DaniHaag mentioned this issue Mar 22, 2013

IE 8 issue with conditionals #1340

Closed

peterdesmet mentioned this issue Jun 13, 2013

Disqus comments do not load in IE 9 peterdesmet/peterdesmet.github.io#17

Closed

FagnerMartinsBrack mentioned this issue Aug 23, 2013

jQuery 1.6+ with IE 10 in IE7 compatibility mode returns error: 'SCRIPT3: Member not found' jquery-validation/jquery-validation#845

Closed

FagnerMartinsBrack mentioned this issue Sep 24, 2013

Disable IE Compatibility Mode in docs, examples twbs/bootstrap#10790

Merged

lovett mentioned this issue Nov 2, 2013

IE Compatibility Mode issues cfpb/regulations-site#433

Closed

ascott1 mentioned this issue Nov 15, 2013

Finalize IE Warning & possible compatibility mode fix cfpb/regulations-site#449

Merged

nternetinspired mentioned this issue Dec 23, 2013

Use IE=edge by default. joomla/joomla-cms#2313

Closed

redian mentioned this issue Feb 5, 2014

Improve IE Compatibility owncloud/core#3179

Merged

marcop135 mentioned this issue Jul 8, 2014

Avoid IE Compatibility view mode jsbin/jsbin#1633

Closed

This was referenced Aug 12, 2014

conditional comments on the <html> tag stop IE8 & 9 from going into EDGE mode murtaugh/HTML5-Reset#54

Closed

conditional comments on the <html> tag stop IE8 & 9 from going into EDGE mode adaptlearning/adapt_framework#454

Closed

patrickkettner mentioned this issue Apr 4, 2015

X-UA compatible and IE conditional headers #1690

Closed

jwieder mentioned this issue Aug 13, 2015

W002 false positive twbs/bootlint#302

Closed

bryanwillis mentioned this issue Jan 2, 2016

Visitor's forced into compatibility mode salcode/bootstrap-genesis#128

Closed

webinista mentioned this issue Jun 16, 2016

Remove conditional comments from header department-of-veterans-affairs/vets-website#2492

Closed

IE conditional comments around html tag adds Compat View icon to address bar #378

IE conditional comments around html tag adds Compat View icon to address bar #378

Comments

DingoEatingFuzz commented Mar 14, 2011

chuanxshi commented Mar 14, 2011

DingoEatingFuzz commented Mar 14, 2011

chuanxshi commented Mar 14, 2011

DingoEatingFuzz commented Mar 14, 2011

gabor commented Mar 18, 2011

MartinMa commented Mar 18, 2011

DingoEatingFuzz commented Mar 19, 2011

paulirish commented Mar 19, 2011

paulirish commented Mar 19, 2011

paulirish commented Mar 19, 2011

DingoEatingFuzz commented Mar 19, 2011

ghost commented Mar 20, 2011

MartinMa commented Mar 20, 2011

MartinMa commented Mar 20, 2011

gabor commented Mar 21, 2011

MartinMa commented Mar 21, 2011

irae commented Mar 27, 2011

irae commented Mar 27, 2011

chuanxshi commented Apr 16, 2011

ghost commented Apr 18, 2011

irae commented Apr 19, 2011

MartinMa commented Apr 19, 2011

necolas commented Apr 19, 2011

chuanxshi commented May 10, 2011

julienw commented May 19, 2011

necolas commented May 19, 2011

julienw commented May 19, 2011

necolas commented May 19, 2011

julienw commented May 19, 2011

paulirish commented Dec 9, 2011

barkan commented Jul 17, 2012

andvik commented Aug 24, 2012

andvik commented Aug 24, 2012

djcsdy commented Aug 30, 2012

djcsdy commented Aug 30, 2012

TheDutchCoder commented Sep 11, 2012

blaiseliu commented Sep 11, 2012

TheDutchCoder commented Sep 11, 2012

andvik commented Sep 11, 2012

garthvh commented Apr 24, 2013