Join GitHub today
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
IE conditional comments around html tag adds Compat View icon to address bar #378
Comments
|
hmmm, i can't replicate the issue, would you mind provide a test case? |
DingoEatingFuzz
commented
Mar 14, 2011
|
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: I noticed that the html5-boilerplate site doesn't have the problem. It could also be htaccess related. |
|
yea, it happens without htaccess, there is the following in the htaccess that fixes this
|
DingoEatingFuzz
commented
Mar 14, 2011
|
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
commented
Mar 18, 2011
|
hmm, maybe i'm misunderstanding something, but doesn't this mean that the if you have to put in the http header, then you do not need the html-tag... |
MartinMa
commented
Mar 18, 2011
|
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
commented
Mar 19, 2011
|
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
reopened this
Mar 19, 2011
|
reopened.. |
|
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 |
|
Also I could repro in IE9 RC.. I imagine this is also present in IE8 final? Can someone confirm? |
DingoEatingFuzz
commented
Mar 19, 2011
|
Confirmed: http://i.imgur.com/rChH7.jpg |
ghost
commented
Mar 20, 2011
|
The fix is as simple as getting that <!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
commented
Mar 20, 2011
|
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
commented
Mar 20, 2011
|
A potential solution to this problem could be this arrangement:
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
commented
Mar 21, 2011
|
maybe the documentation could be changed a little (assuming the http-header method is bulletproof).
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
commented
Mar 21, 2011
|
@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):
The empty conditional comment is because of the blocking issue in IE8. This all is starting to get a little messy :) |
irae
commented
Mar 27, 2011
|
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:
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
commented
Mar 27, 2011
|
I forgot to mention. AFAIK, Google Chrome frame docs advise putting the X-UA-Compatible as above in the document as possible. Since So this time I changed the order, since the charset will not be affected by the conditional comments above it. |
|
@irae: it might be a nice idea, but is it too much of a hack? imo |
ghost
commented
Apr 18, 2011
|
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
commented
Apr 19, 2011
|
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 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
commented
Apr 19, 2011
|
I noticed that my other comment on here is a bit distorted, so here are my two cents again.
<!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". Thoughts? I like this one better, because it involves no Javascript to add the classes. edit: corrected a little slip in the code |
|
@MartinMa: I think a problem with (2) is that a lot of CMS add id/classes to the |
|
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
commented
May 19, 2011
|
I use "" as the very first line in my HTML files. 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. |
|
ignore me |
julienw
commented
May 19, 2011
|
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. |
|
@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 |
julienw
commented
May 19, 2011
|
I just checked using "IE8 Compatibility View", and it's still IE8 standards. |
|
@julienw Please could you drop a reduced testcase in a pastebin and link to it here? Thanks |
|
http://mathiasbynens.be/notes/safe-css-hacks#comment-13 may be of interest. |
zachleat
commented
May 19, 2011
|
Seems like there is a bit of confusion. Just because the button is showing doesn't mean that compatibility view is enabled. The button will be in a depressed state for that. If the meta tag/http header is interpreted correctly, the button doesn't display at all (which is the desired behavior this ticket is trying to achieve). |
|
OK! @julienw seems correct, here's a basic testcase of what he is describing. It doesn't drop IE8 into IE7 mode. But other issues related to use on Ex 1 : http://pastie.org/1926628 Switching the conditional comments back to the Ex 2 : http://pastie.org/1926635 |
julienw
commented
May 19, 2011
|
Made this : http://pastie.org/1926658 Seems to trigger IE8 standards in both IE8 and IE8 Compat. |
|
@zachleat You may well be right about the confusion. Would be great if you got involved in this issue, if you have time. Thanks |
julienw
commented
May 19, 2011
zachleat
commented
May 19, 2011
|
This seems to get rid of the button, maintaining Standards mode in both IE8 and IE9. You might also think that since we have a comment above the doctype, it might trigger quirks mode, but I tested it in IE7 too and it maintains Standards mode. IE must pre-process the conditional comments out prior to rendering, avoiding that bug somehow. Please confirm, but take care to remove of any existing Compatibility View settings in your browser for intranet sites (Tools -> Compat View) or .htaccess rules that might interfere. |
|
@zachleat That was what I found in the "Ex 2" pastie as well. Glad you can confirm it. |
zachleat
commented
May 19, 2011
|
@necolas Ah, apparently I'm horrible at reading. Sorry about that. |
|
so an empty CC before the doctype eh cool hack.. what do you guys think? put into the BP? or document.. this one seems like a tough call.. |
irae
commented
May 20, 2011
|
Is this safe to use? Does this work in feature phones browsers? Not that It would be a real problem, but it's best to know what kind of problem, if any, this could raise before inclusion. |
DingoEatingFuzz
commented
May 20, 2011
|
Being the person who raised this issue, I obviously hate the compatibility view (aka, break your website) button a lot. However, I am also on the fence with this. I honestly don't care about standards; I care about what makes my websites work. This part of me says put the hack in because it works. The other part of me says don't put the hack in because boilerplate code isn't supposed to be bloated. If the average person is just going to delete the hack and opt for sending this via HTTP header then it shouldn't be in the code by default. It should just be documented. So I guess my only question is, how many people will need/use this? |
|
@DingoEatingFuzz and others who have reporting this issue : please can you test to confirm if this alternative code avoids the issue too. It should do because the conditional comments appear after the X-UA meta tag and the opening Another bonus is that you can stick all
vs
|
irae
commented
May 20, 2011
|
@DingoEatingFuzz I think that the people who needs this code most are probably the ones with less advanced html skils and possibly less able to configure apache (or other httpd). I vote for inclusion with inline comment about it's removal. Why? Removing is easier then inserting it and forgetting or not caring to remove it is (probably) less harmful then forgetting or not caring to insert it. (and I'm still wishing for some kind soul with many phones available to test this on older phones) |
|
I've done a write up of @julienw's technique and the one I posted above http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ What do people think of these techniques? |
julienw
commented
May 20, 2011
|
I think we have to understand what IE does. My view is that it does some heuristics with the beginning of a file. We already know this for determining the content-type of a file, either with the first bytes or with the meta charset. But maybe he does this too for "preloading" the conditional comments engine (that could be why conditional comments around don't trigger the 100ms penalty), or for finding the document mode. Someone has to do some more systematic tests, and it won't be me as I'll soon have no access to computer. :-) |
|
Nice writeup. To me, it seems like the best solution here is docs on setting this in your server config. Similar to the favicon stuff.. Set it back there and clean up the markup. |
guitarzan
commented
May 20, 2011
|
@necolas I haven't tested it, but I think your double-
The difference is in the final conditional comment. Non-IE browsers will use the very first
In this example, IE9 and up will use the original Finally, using the method in your most recent check-in on
... and only old versions of IE would get the extra |
|
@guitarzan That won't work because the IE-specific classes won't bubble up to the first |
guitarzan
commented
May 20, 2011
|
I see (I think). So this would work:
... if you don't need the "no-js" class? |
|
@guitarzan Yes it would :) |
|
The final resolution for this thread is we will continue to recommend server side config and remove the html meta tag. Perhaps we need stronger words there to mention how using it server-side would be more useful? |
mathiasbynens
closed this
in
5e26749
Jun 24, 2011
|
Eh? |
|
anything prior to doctype will throw IE6 and only IE6 into quirks. fwiw. |
|
fshost left this comment on my blog which more clearly states what he was trying to say here
as you can see there CC comments are AFTER the doctype. so.. this point is moot. |
|
But we havent got anything prior to the doctype. Don't get the comment about "moving on to a different template" |
|
me neither! also 20 people are getting emails for these... so let's shut up now. :D |
|
♥♡♥ |
|
As this issue is referenced in our inline documentation, I wanted to add this extra data point:
|
This was referenced Feb 6, 2012
barkan
commented
Jul 17, 2012
|
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
commented
Aug 24, 2012
|
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:
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
commented
Aug 24, 2012
|
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
commented
Aug 30, 2012
|
This is all preposterous. Just wrap and apply classes to |
djcsdy
referenced this issue
Aug 30, 2012
Closed
Conditional comments wrapping <html> prevent IE from honouring <meta http-equiv=X-UA-Compatible> #1187
djcsdy
commented
Aug 30, 2012
|
OK, so I skipped over some of the comments. Fair enough. |
TheDutchCoder
commented
Sep 11, 2012
|
Is there a reason why this is kept in boilerplate if it:
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
commented
Sep 11, 2012
|
andvik, isn't it supposed to be placed inside like:
|
TheDutchCoder
commented
Sep 11, 2012
|
blaiseliu: correct |
andvik
commented
Sep 11, 2012
|
blaiseliu: Yes, I believe you are right - good catch |
This was referenced Nov 19, 2012
garthvh
commented
Apr 24, 2013
|
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 . |
DingoEatingFuzz commentedMar 14, 2011
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:
I'm sure there are better ways to handle this, but this works as expected.