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

Example code for implementing card waterfall layout with css3 column

After mybatis-plus paging parameters are passed in, the sql where condition does not have limit paging information operation

I spent almost two hours trying various methods. ...

Conditional comment style writing method and sample code

Example code for implementing card waterfall layout with css3 column

Solution to MySql service disappearance for unknown reasons

Vuex implements simple shopping cart function

Quickly solve the problem that CentOS cannot access the Internet in VMware

Detailed tutorial on installing Docker and nvidia-docker on Ubuntu 16.04

MySQL infrastructure tutorial: detailed explanation of the query statement execution process

How to hide rar files in pictures

Vue uses the video tag to implement video playback

Tutorial on installing mysql-8.0.18-winx64 under Windows (with pictures and text)

Web page creation question: Image file path

Recommend

Example code for implementing a circular trajectory animation using CSS3 and table tags

Website front-end performance optimization: JavaScript and CSS

Analysis of product status in interactive design that cannot be ignored in design

Write a simple calculator using JavaScript

Pure CSS to achieve input box placeholder animation and input verification

Linux /etc/network/interfaces configuration interface method

After mybatis-plus paging parameters are passed in, the sql where condition does not have limit paging information operation

Sample code for implementing dynamic glowing special effects animation of circles using pure CSS3

MySQL 5.7.18 installation and configuration tutorial under Windows

Modification of the default source sources.list file of ubuntu20.04 LTS system

How to install ZSH terminal in CentOS 7.x

A brief discussion on the differences between FTP, FTPS and SFTP

How to view nginx configuration file path and resource file path

React entry-level detailed notes

MySQL 5.7.24 compressed package installation and configuration method graphic tutorial