Conditional comment style writing method and sample code

As front-end engineers, IE must be familiar to us. When writing code to implement a design draft, various IE compatibility issues often arise. There are many ways to deal with compatibility. The easiest way is to write different styles for different browsers.
Each browser in IE has its own set of comments. Annotations belonging to your own browser will be recognized specifically in your own browser and not by his browser. Next we will show you how to write conditional styles.

It is a comment in HTML language. It is a note added to the code to let yourself or your team members know what you wrote, when you wrote it, etc. This comment will not be displayed in the browser, but you can see this part when viewing the source code of the page, such as the following simple example:

Copy code

The code is as follows:

<div>HTML Comment</div>

The content in the above code is the comment part. Then if we add a conditional statement based on the above, we can get the conditional comment we want. IE has its own set of conditional comments. There are many benefits of conditional comments, the main one is to make your website style neat and refreshing, and the second is to easily be compatible with all eligible browsers. These benefits give us an instant interest in conditional comments. So how should conditional comments be written? Let me take a look at it below.

How to write conditional styles <br />The method is very simple. We just need to import the external style sheet in the normal way, and then nest conditional comments outside. Before using conditional comment statements, there are several conditional comment attributes that we must understand and use:
1. gt (great than): select versions greater than the conditional version, excluding the conditional version itself;
2. lt (less than): This is the opposite of gt, which means selecting the version below the conditional version, excluding the conditional version itself;
3. gte (great than or equal): select versions greater than the conditional version and including the conditional version itself;
4. lte (less than or equal): select the version below the conditional version, including the conditional version itself;
5. !: Select all versions except the conditional version, regardless of high or low.

Conditional Style Examples
1. Support all IE browsers

Copy code

The code is as follows:

2. Support all browsers except IE

Copy code

The code is as follows:

Copy code

The code is as follows:

<link rel="stylesheet" href="noIE.css" type="text/css" />

3. Only supports IE10

Copy code

The code is as follows:

4. Only supports IE9

Copy code

The code is as follows:

5. Only supports IE8

Copy code

The code is as follows:

6. Only supports IE7

Copy code

The code is as follows:

7. Only supports IE6

Copy code

The code is as follows:

8. Support IE10 and below (IE9 and below)

Copy code

The code is as follows:

Copy code

The code is as follows:

9. Support IE9 and below versions (IE8 and below versions)

Copy code

The code is as follows:

Copy code

The code is as follows:

10. Support IE8 and below (IE7 and below)

Copy code

The code is as follows:

Copy code

The code is as follows:

11. Support IE7 and below (IE6 and below)

Copy code

The code is as follows:

Copy code

The code is as follows:

12. Versions higher than IE9 (IE10 and above)

Copy code

The code is as follows:

Copy code

The code is as follows:

13. Versions higher than IE8 (IE9 and above)

Copy code

The code is as follows:

Copy code

The code is as follows:

14. Versions higher than IE7 (IE8 and above)

Copy code

The code is as follows:

Copy code

The code is as follows:

15. Versions higher than IE6 (IE7 and above)

Copy code

The code is as follows:

Copy code

The code is as follows:

16. Reference JavaScript tags with conditional comments

Copy code

The code is as follows:

The above shows how to create conditional comment styles. You can use one or more of them according to your needs. Finally, conditional comments are mainly aimed at IE browsers, so we also call them IE conditional comments. In this way, managing separate styles written for IE compatibility brings great convenience and benefits. With conditional comments we can easily write conditional styles and solve problems in browsers. This is the end of the introduction to conditional comments.

<<: MySQL example to explain single-row functions and character math date process control

>>: Build a severe weather real-time warning system with Node.JS

A brief analysis of the issues that should be paid attention to when making 404 error pages

Conditional comment style writing method and sample code

A brief analysis of the issues that should be paid attention to when making 404 error pages

MySQL 8.0.17 installation and configuration method graphic tutorial

Implementation of Docker cross-host network (overlay)

Detailed explanation of the error when using Element-ui NavMenu submenu to generate recursively

Two methods to implement Mysql remote connection configuration

WeChat applet + ECharts to achieve dynamic refresh process record

React tips teach you how to get rid of hooks dependency troubles

Vue3 + TypeScript Development Summary

NestJs uses Mongoose to operate MongoDB

A permanent solution to MYSQL's inability to recognize Chinese

Recommend

Introduction to the use of MySQL source command

JS implements dragging the progress bar to change the transparency of elements

Implementation of scheduled backup in Mysql5.7

Detailed explanation of how to migrate a MySQL database to another machine

Detailed explanation of MySQL transaction isolation level and MVCC

Two special values in CSS are used to control the inherit and initial methods of the cascade

WeChat applet implements SMS login in action

CSS3 to achieve dynamic background gradient effect

MySQL 5.7.25 installation and configuration method graphic tutorial

Detailed explanation of this pointing problem in JavaScript

Detailed installation history of Ubuntu 20.04 LTS

Solution to the problem that MySQL can be started when installed in WAMP but cannot be started after restart

How to use css overflow: hidden (overflow hiding and clearing floats)

PostgreSQL materialized view process analysis

Div adaptive height automatically fills the remaining height