IE’s market share is declining rapidly, but there are still many PCs in China using the Win 7 operating system. For the PC version of web development at present, fewer and fewer people are concerned about it. For developing web pages, there are still some methods and techniques that need to be understood.

IE conditional comments are a special kind of HTML comments, which can only be understood by IE5.0 and above. For example, a normal HTML comment is.

1
<!--This is a comment-->

And the IE conditional comments, which are only readable by IE, are

1
<!--[if IE]> IE HTML Code <![endif]-->

Non-IE conditional comments.

1
<!--[if ! IE]>--> non-IE HTML Code <!--<![endif]-->

Non-version-specific IE condition comments.

1
<!--[if ! lt IE 7]>Code for browsers that match the if condition<!--<![endif]-->

In short, all browsers except IE think of conditional comments as just a normal HTML comment. IE conditional comments are a useful way to hide or show specific code to IE, and it makes more sense to use IE conditional comments to write CSS “hacks” than to use weird _/make bugs in CSS is a much more sensible approach. In layman’s terms, a conditional comment is some if judgments, but instead of being executed in the script, these judgments are executed directly in the html code.

  • The basic structure of conditional comments is the same as that of HTML comments (<! ->) are the same. So browsers other than IE will treat them as normal comments and ignore them completely.
  • IE will parse the content in conditional comments as if they were normal page content based on if conditions.
  • Conditional comments use the HTML comment structure, so they can only be used in HTML files, not in CSS files.

Syntactically this is quite legal as a normal HTML comment. Any browser will consider the part between <! and –> are comments and ignore them. But IE will also see the [if IE]> in it and start interpreting the rest of the code until it encounters <! [endif]. So, the following code will not be displayed in any other browser.

IE version control can be made more flexible with the “compare operator”, which is used by prefixing IE with the “compare operator”. The legal operators are as follows.

  • lte : is the abbreviation of Less than or equal to, which means less than or equal to.
  • lt : is the abbreviation of Less than, which means less than.
  • gte : is Greater than or equal to the abbreviation, that is, greater than or equal to the meaning.
  • gt : is the abbreviation of Greater than, which means greater than.
  • ! : is the meaning of not equal to, the same as the javascript not equal to determinant.

Example:

1
2
3
<!--[if gt IE 5.5]> / 如果IE版本大于5.5 /
<!--[if lte IE 6]> / 如果IE版本小于等于6 /
<!--[if !IE]> / 如果浏览器不是IE /

While it may seem more time consuming when you first use conditional comments, you’ll find it very convenient when you debug your CSS later. With conditional comments you only need to write HTML comments once, whereas with bugs you need to write long, ugly code for every rule and often hacks to change other hacks, except that conditional comments are legal HTML comments for any browser that doesn’t support them. Here are some differences between conditional comments and CSS hacks.

  • Hacks are based on browser bugs that may eventually be fixed.
  • Conditional comments are based on IE-specific code, and this recognition mechanism is not removed at any time.
  • Every browser can see your hacks, and maybe the next version or a new browser will make a mistake in your hacks code.
  • Only IE can see conditional comments, which affect the page with an extra “IE file” that other browsers won’t even download.
  • Hacks don’t ensure which browsers work and which don’t, and the more hacks you use, the more confusing the code becomes.
  • Conditional comments use version matching to make it easy for authors to write code for specific versions.