IE Conditional Comments and Chrome/Firefox

Baxter picture Baxter · Apr 15, 2012 · Viewed 12.5k times · Source

I am using the following IE conditional comment:

<!--[if gt IE 7]>
Here is some code.
<![endif]-->

This works great to keep the code from rendering in any IE lower than 8.
However, this also keeps the code from rendering in Chrome and Firefox.

Any ideas on why this is happening, and how I can get the code to render in browsers other than IE?

Answer

zebasz picture zebasz · Apr 15, 2012

Conditional comments are a Microsoft IE-specific rule, and they are not part of any standard. If you check the structure of a conditional comment:

<!--[if gt IE 7]>
Here is some code.
<![endif]-->

As its name would imply, it is all just a big comment <!-- comment -->. IE checks comments for conditions such as these which, again, do not comply with HTML standards.

To create code which doesn't render in IE, but does render in other browsers, you use the following conditional:

<!--[if !IE]> -->
This will be rendered by anything but IE.
<!-- <![endif]-->

See how the conditions are enclosed in closed comments? That's why that is rendered in normal browsers, while IE checks for the conditional, and decides to omit everything up until the endif.

EDIT

If you want to add another condition, and keep rendering the code on non-IE browsers, you could use the following workaround:

<!--[if gt IE 7]> <!-- -->
Here is some code for anything but IE 7 and below.
<!-- <![endif]-->

Note I had to use open the comment again to prevent IE from rendering --> before the code. Other browsers will still consider it part of the comment.