5

I have a website page that displays a warning box if you are using an unsupported browser, IE<=8. This works fine in IE 8 and below, however today I was testing in IE 10 and it seems to also read this conditional. It shows the warning box when it shouldn't. I have tried many things but I dont know what might be the problem. Here is some of the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 ...
</head>
<!--[if lte IE 8]>
    <div style="position:absolute;bottom:0px;left:0px;background-color:orange;color:white;z-index:1000;width:250px;text-align:center;">This content is best viewed in Chrome, Firefox or any other Modern Browser. <br/><strong>Please Upgrade.  </strong></div>
<![endif]-->
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
lomas09
  • 1,114
  • 4
  • 12
  • 28
  • Does it respond to IE 10 too? Could you make a `IE 8 and not IE 10` condition? – Geeky Guy Sep 04 '13 at 18:37
  • 6
    @Renan: The problem here is that IE10 is not supposed to see conditional comments *at all*. – BoltClock Sep 04 '13 at 18:38
  • (Well it sees them but it shouldn't try to interpret them.) – BoltClock Sep 04 '13 at 18:51
  • IE10 is seeing AND interpreting the content inside of conditional comments even when they are expressly related to other IE versions such as 8 and 9. What can I do to make IE10 ignore these comments? still fires in IE 10. this is irritating. – Jeremy Moritz Nov 13 '13 at 21:13

3 Answers3

4

Stab in the dark, but perhaps IE is getting confused by your two X-UA-Compatible headers and so is falling back to Compatibility View on its own volition. That's the only situation I can think of for IE10 to be processing conditional comments instead of ignoring them outright, because in Compatibility View it emulates IE7, which is lte IE 8 and so would pick up content hidden by that conditional comment.

See what happens if you combine them into a single <meta> tag:

  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • To be honest, I can't see any reason for having the entry for Chrome anyway; Chrome doesn't pay any attention to it, and even if it did, why on earth would you want it to emulate Chrome version 1? – Spudley Sep 05 '13 at 08:06
  • @Spudley: That entry is for Chrome Frame; 1 means force IE to act like Chrome when the plugin is available. – BoltClock Sep 05 '13 at 08:07
  • Well, Chrome Frame is deprecated as well, but I was thinking it used `frame=1`.... hmmm, maybe you're right. it's been a while since I used it. – Spudley Sep 05 '13 at 08:11
  • This doesn't seem to do anything in my case. IE10 is still exhibiting the issue. – Jeremy Moritz Nov 13 '13 at 21:14
2

The “conditional comments” feature has been removed from IE 10, according to Microsoft document Conditional comments. This means that IE 10 skips a “conditional comment” as simply a comment (which is what it is by HTML specifications).

This was confirmed by my testing of the code in the question on IE 10. No warning box appears, independently of browser mode settings. It sounds thus probable that the real page has some syntax error that causes some text to appear as normal content, rather than in a “conditional comment”.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    Interesting, so there's none of that Compatibility View voodoo then. (I had to make a guess because I don't have a test environment handy at the moment, woefully.) – BoltClock Sep 04 '13 at 19:21
0

So I've been debugging and trying to fix the code so it would work and I think two things might of have fixed it.
First: the conditional comment was declared before the opening of the body tag, and I am guessing that since it is a div element it has to be contained withing the body tag. Moving it inside the body could of had fix it.
Second:I also had a script tag withing the head of the document that had some jQuery scripting in it. Moving this tag to the end of the body tag might have also fix the problem.

lomas09
  • 1,114
  • 4
  • 12
  • 28