How to use conditional comments to determine the browser version to solve the problem of page compatibility

This article mainly introduces "how to use conditional comments to judge the browser version to solve the page compatibility problem". In the daily operation, it is believed that many people have doubts about how to use conditional comments to judge the browser version to solve the page compatibility problem. The editor consulted all kinds of materials and sorted out a simple and useful method of operation. I hope it will be helpful for you to answer the question of "how to use conditional comments to judge the browser version to solve the page compatibility problem"! Next, please follow the editor to study!

First of all, the reason why the pages we write behave differently in different browsers is that different browsers do not follow exactly the same rules when parsing the page. For example, IE, different versions of the resolution are different, not to mention different browser vendors, different kernels. But when we encounter compatibility problems, we should first check our own code to see if it is our own problem, and then investigate the browser problem. Also, don't always use CSS Hack technology when you encounter compatibility problems, because CSS Hack technology is not advocated by the W3C, so try not to use it unless you have to.

All right, after a lot of talk, let's get down to business:

Comment on different browser versions

(1) support for all IE browsers (excluding IE10 standard mode)

(2), all non-IE browsers (excluding IE10 standard mode)

Only non-IE browsers display (excluding IE10)

(3), IE10 browser

So far, no image of this version of the browser has been found.

(5), IE8 browser

(6), IE7 browser

(7), IE6 browser

(8), browsers below IE10 (excluding IE10)

(9), IE9 and below IE9 browsers (including IE9)

(10), browsers above IE6 (excluding IE6)

(11), IE7 and IE7 browsers

So how do we use it? It is impossible for us to write the whole page in different comment blocks for compatibility. In fact, there are two ways:

Method 1. Load different css according to different browser version

If we need to be compatible with IE6, 7, 8 respectively, we can do this.

The code is as follows:

Method 2. Depending on the browser version, mount different classes such as html or body

The code is as follows:

Finally, let's take a look at what lt,lte,gt,gte stands for.

Lt: less than the current version

Lte: less than or equal to the current version, including itself

Gt: greater than the current version

Gte: greater than or equal to the current version, including itself

Well, that's all for today, and you probably already know how to handle browser compatibility easily, so next time we'll introduce some CSS Hack technologies to further deal with browser compatibility.

Test the code:

The code is as follows:

Use conditional comments to determine the browser version and solve the compatibility problem

Only non-IE browsers display (excluding IE10)

At this point, the study on "how to use conditional comments to judge the browser version to solve the page compatibility problem" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!