New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
DingoEatingFuzz opened this Issue Mar 14, 2011 · 67 comments

Comments

Projects
None yet
@DingoEatingFuzz

DingoEatingFuzz commented Mar 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:

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

@shichuan

This comment has been minimized.

Show comment
Hide comment
@shichuan

shichuan Mar 14, 2011

Member

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

Member

shichuan commented Mar 14, 2011

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

@DingoEatingFuzz

This comment has been minimized.

Show comment
Hide comment
@DingoEatingFuzz

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

Themble

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

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:

Themble

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

@shichuan

This comment has been minimized.

Show comment
Hide comment
@shichuan

shichuan Mar 14, 2011

Member

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
Member

shichuan commented Mar 14, 2011

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

This comment has been minimized.

Show comment
Hide comment
@DingoEatingFuzz

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

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

This comment has been minimized.

Show comment
Hide comment
@gabor

gabor Mar 18, 2011

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

gabor commented Mar 18, 2011

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

This comment has been minimized.

Show comment
Hide comment
@MartinMa

MartinMa 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?

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

This comment has been minimized.

Show comment
Hide comment
@DingoEatingFuzz

DingoEatingFuzz 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.

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 paulirish reopened this Mar 19, 2011

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Mar 19, 2011

Member

reopened..

Member

paulirish commented Mar 19, 2011

reopened..

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Mar 19, 2011

Member

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

Member

paulirish commented Mar 19, 2011

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Mar 19, 2011

Member

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

Member

paulirish commented Mar 19, 2011

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

@DingoEatingFuzz

This comment has been minimized.

Show comment
Hide comment
@DingoEatingFuzz

DingoEatingFuzz commented Mar 19, 2011

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Mar 20, 2011

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.

ghost commented Mar 20, 2011

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

This comment has been minimized.

Show comment
Hide comment
@MartinMa

MartinMa 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

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

This comment has been minimized.

Show comment
Hide comment
@MartinMa

MartinMa Mar 20, 2011

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

MartinMa commented Mar 20, 2011

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

This comment has been minimized.

Show comment
Hide comment
@gabor

gabor Mar 21, 2011

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

gabor commented Mar 21, 2011

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

This comment has been minimized.

Show comment
Hide comment
@MartinMa

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

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

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

<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

This comment has been minimized.

Show comment
Hide comment
@irae

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

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

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

This comment has been minimized.

Show comment
Hide comment
@irae

irae 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 <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.

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

@shichuan

This comment has been minimized.

Show comment
Hide comment
@shichuan

shichuan Apr 16, 2011

Member

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

Member

shichuan commented Apr 16, 2011

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost 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.

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

This comment has been minimized.

Show comment
Hide comment
@irae

irae 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 <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.

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

This comment has been minimized.

Show comment
Hide comment
@MartinMa

MartinMa Apr 19, 2011

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

  1. Either remove the meta tag altogether and refer to .htaccess (or other server config files).
  2. 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

MartinMa commented Apr 19, 2011

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

  1. Either remove the meta tag altogether and refer to .htaccess (or other server config files).
  2. 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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Apr 19, 2011

Member

@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 {}

Member

necolas commented Apr 19, 2011

@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 {}

@shichuan

This comment has been minimized.

Show comment
Hide comment
@shichuan

shichuan May 10, 2011

Member

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.

Member

shichuan commented May 10, 2011

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

This comment has been minimized.

Show comment
Hide comment
@julienw

julienw May 19, 2011

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.

julienw commented May 19, 2011

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas May 19, 2011

Member

ignore me

Member

necolas commented May 19, 2011

ignore me

@julienw

This comment has been minimized.

Show comment
Hide comment
@julienw

julienw 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 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.

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas May 19, 2011

Member

@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.

Member

necolas commented May 19, 2011

@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

This comment has been minimized.

Show comment
Hide comment
@julienw

julienw May 19, 2011

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

julienw commented May 19, 2011

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Dec 9, 2011

Member

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

Member

paulirish commented Dec 9, 2011

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

This comment has been minimized.

Show comment
Hide comment
@barkan

barkan 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?
<!--[if IE]>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<![endif]-->

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?
<!--[if IE]>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<![endif]-->

@andvik

This comment has been minimized.

Show comment
Hide comment
@andvik

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

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

  <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

This comment has been minimized.

Show comment
Hide comment
@andvik

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

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

This comment has been minimized.

Show comment
Hide comment
@djcsdy

djcsdy Aug 30, 2012

This is all preposterous.

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

djcsdy commented Aug 30, 2012

This is all preposterous.

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

@djcsdy

This comment has been minimized.

Show comment
Hide comment
@djcsdy

djcsdy Aug 30, 2012

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

djcsdy commented Aug 30, 2012

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

@TheDutchCoder

This comment has been minimized.

Show comment
Hide comment
@TheDutchCoder

TheDutchCoder Sep 11, 2012

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

  1. Doesn't work as expected / intended;
  2. 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.

TheDutchCoder commented Sep 11, 2012

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

  1. Doesn't work as expected / intended;
  2. 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

This comment has been minimized.

Show comment
Hide comment
@blaiseliu

blaiseliu Sep 11, 2012

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

blaiseliu commented Sep 11, 2012

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

This comment has been minimized.

Show comment
Hide comment
@TheDutchCoder

TheDutchCoder Sep 11, 2012

blaiseliu: correct

TheDutchCoder commented Sep 11, 2012

blaiseliu: correct

@andvik

This comment has been minimized.

Show comment
Hide comment
@andvik

andvik Sep 11, 2012

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

andvik commented Sep 11, 2012

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

@garthvh

This comment has been minimized.

Show comment
Hide comment
@garthvh

garthvh 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 .

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 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment