Detailed explanation of conditional comments in IE browser

IE conditional comments are a non-standard logical statement provided by Microsoft since IE5. Its function is to flexibly import different html elements, such as style sheets, html tags, etc. into different IE versions of browsers. Obviously, the biggest advantage of this method is that it is a compatible solution officially given by Microsoft and it can also pass W3C validation.

Let’s take a look at a few examples:

1. Only IE can recognize

<!--[if IE]>
 <link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->

Because only IE5 and above versions begin to support IE conditional comments, all "only IE" can recognize it means "only IE5 and above versions" can recognize it.

2. Only specific versions can recognize

<!--[if IE 8]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->

Identify a specific IE version, whether it is higher or lower. The above example can only be recognized by IE8.

3. Only those who are not specific versions can identify

<!--[if !IE 7]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->

In the above example, the specific version of IE7 cannot be recognized, but other versions can be recognized, of course, it must be IE5 or above.

4. Only versions higher than a specific version can recognize

<!--[if gt IE 7]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->

In the above example, only versions higher than IE7 can be recognized. IE7 is not recognized.

5. Only when it is equal to or higher than a specific version can it be recognized

<!--[if gte IE 7]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->

In the above example, IE7 and higher versions can be recognized.

6. Only versions lower than a specific version can be recognized

<!--[if lt IE 7]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->

In the above example, only versions lower than IE7 can be recognized, and IE7 cannot.

7. Only those that are equal to or lower than a specific version can be identified

<!--[if lte IE 7]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->

In the above example, IE7 and lower versions can be recognized.

Keyword explanation

The above codes may seem difficult to remember, but in fact, they are easy to remember as long as you explain the keywords a little.

lt: It is the abbreviation of Less than, which means less than.

lte: It is the abbreviation of Less than or equal to, which means less than or equal to.

gt: It is the abbreviation of Greater than, which means greater than.

gte: It is the abbreviation of Greater than or equal to, which means greater than or equal to.

!: It means not equal to, which is the same as the inequality judger in JavaScript.

If you explain it this way, it will be much easier to remember.

Special Note:

1. Some people will try to use