IE10 is reading IE8 conditional comments

1.8k Views Asked by At

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

There are 3 best solutions below

1
On

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

0
On

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.

4
On

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