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]-->
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 8and so would pick up content hidden by that conditional comment.See what happens if you combine them into a single
<meta>tag: