This blog is NOFOLLOW Free!

IE8 conditional comments strange behaviour

I have come today on a strange behaviour of IE8 regarding the conditional comments. As anyone knows, conditional comments are a very convenient way to instruct IE to display some content when it cannot display it like all the other browsers.

In short, I wanted to link within a conditional comment a special stylesheet inside the head of a document. Usually, this is a very simple task.  I made it a lot of times before, but I never noticed the strange requirement explained below.

My code was something like this:

<!--[if lte IE8]>
<link type="text/css" related="stylesheet" href="blabla.css">
<![endif}--> 

To my surprise, IE did interpreted correctly the code from "blabla.css" but displayed the following line on the top of the page:

<!--[if lte IE8]><![endif}-->

which was a totally non-sense. It was a triple non-sense, because a) this expression is a comment, b) anyway, this comment was inserted in the head section, and c) the IE interpreted the css code.

If you don't believe it, just use the following code and see it for yourself:

<!DOCTYPE html>
<head>
  <title>Test</title>
  <!--[if lte IE8]>
   <style>
   h1 {color: Red;}
   </style>
  <![endif]-->
</head>
<body>
  <h1>This should be red in IE8</h1>
</body>

The example above will output a red H1 in IE8, preceded by… a strange line that displays the conditional comment’s expression.

<!–[if lte IE8]><![endif}-->

This should be red in IE8

After scratching my head and trying to find a solution to this uncomprehensible situation, I finaly managed to deal with it. The problem was the name of the browser. When writing the comment, one must carefuly obey the syntax recommended by Microsoft and write <!--[if IE 8]> instead of <!–[if IE8]> (with a space between “IE” and “8″). This is all! The following example will output a correct page and will stop triggering the abnormal behaviour, despite the fact that the only difference is given by a space between IE and 8.

<!DOCTYPE html>
<head>
  <title>Test</title>
   <!--[if lte IE 8]>
    <style>
     h1 {color: Red;}
    </style>
   <![endif]-->
</head>
<body>
   <h1>This should be red in IE8</h1>
</body>

Thanks for reading! If you enjoyed it, please comment or share this post.

Share this post:

5 Responses to “IE8 conditional comments strange behaviour”

  • Interesting. As I read your article, I was thinking that it was the inclusion of your expression [if lte IE 8] and yet, as you correctly point out, it was the actually the difference between [if lte IE8] and [if lte IE 8]. I did not know that. Thank you.

  • a browser error like this can really mess your websites.. thanks for the heads up. :)

  • problem solved. Thanx!

  • Label a panoramic show of tasteful and easy Kraft recipes, preparation tips, excitable dinner recipes, organization foods, budget docket and wholesome diet pick; we acquire every instruction that you condition.Evergreenrecipe.com is concern’ prima marque in matter and recipes concerned acceptance, on web. Thousands of recipes created and rated by top chefs. Put out your stage and get fit to activity out whatever happening yummy.

  • Is this bug fixed in IE9? I never saw this bug before ..