Menu
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]-->
332
Conditional comments are conditional statements to hide or provide HTML source code from Internet Explorer. 2. There are two types of conditional comments - downlevel-hidden - which is used to hide HTML source and downlevel-revealed which is used to reveal HTML source code in Internet Explorer.
Conditional comments are conditional statements interpreted by Microsoft Internet Explorer versions 5 through 9 in HTML source code. They can be used to provide and hide code to and from these versions of Internet Explorer.
--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files.
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" />
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”.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
