Home > Developer > JavaScript
Use conditional comments to determine the browser version, solve compatibility issues, and comment out the browser version
We should have encountered many browser compatibility problems. When writing some pages, it may be good on IE8 and IE9, when we browse these pages in IE6, IE7, or other browsers, we may find that our pages are completely invisible. As a front-end developer, this is the most maddening problem. How can we solve these problems?
First of all, the reason why the pages we write are different in different browsers is that different browsers do not follow the same rules when parsing pages. For example, for IE, different versions have different resolutions, not to mention different browser vendors and different kernels. However, 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. In addition, do not use CSS Hack technology when you encounter compatibility problems, because CSS Hack technology is not respected by W3C. Therefore, do not use it unless necessary.
Now, let's start with the question:
Comment out different browser versions
(1) Support for all IE browsers (excluding IE10 standard mode)
| 1 | <! -- [If IE]> only display in IE6, 7,8, and 9 browsers (not supported in standard IE10 mode) <! [Endif] --> |
(2) All non-ie browsers (excluding IE10 standard mode)
| 1 | <!--[if !IE]><!-->Only display in non-ie browsers (excluding IE10)<!--><![endif]--> |
(3) IE10 Browser
No images of browsers of this version have been found yet <! -- [If IE 9]> it is similar to a separate comment, but IE10 does a good job. In terms of layout alone, there is no difference in the performance of the page on IE10, FireFox, and Chrome.
(4) IE9 Browser
| 1 | <! -- [If IE 9]> display in IE 9 browser |
(5) IE 8 browser
| 1 | <! -- [If IE 8]> display in IE 8 browser |
(6) IE 7 Browser
| 1 | <! -- [If IE 7]> display in IE 7 browser |
(7) IE 6 Browser
| 1 | <! -- [If IE 6]> display in IE 6 browser |
(8) IE10 or earlier browsers (excluding IE10)
| 1 | <! -- [If lt IE 10]> display in IE10 or earlier browsers (excluding IE10) |
(9) Internet Explorer 9 and Internet Explorer 9 or earlier (including Internet Explorer 9)
| 1 | <! -- [If lte IE 9]> display in IE 9 and earlier versions (including IE9) |
(10) IE6 or later browsers (excluding IE6)
| 1 | <! -- [If gt IE 6]> display in IE 6 or later browsers (excluding IE6) |
(11) IE7 and IE7 browsers
| 1 | <! -- [If gte IE 7]> display (including IE7) in IE7 and later versions |
So how can we use it? It is impossible for us to write the entire page in different comment blocks to ensure compatibility. In fact, there are two methods:
Method 1: Load different css files based on different browser versions
If we need to be compatible with IE6, 7, and 8 respectively, we can do this.
| 1234567891011 | <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="ie8.cdd"><![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.cdd"><![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.cdd"><![endif]--> |
Method 2: Mount different classes to html or body based on different browser versions, such
| 1234 | <!--[if lt IE 7 ]> |
Finally, let's take a look at what lt, lte, gt, and gte represent.
Lt: earlier than the current version
Lte: earlier than or equal to the current version, including itself
Gt: later than the current version
Gte: greater than or equal to the current version, including itself
Now, we are here today. You may already know how to simply handle browser compatibility. Next time, we will introduce some CSS Hack technology to further process browser compatibility.
Test code:
| 123456789101112131415161718192021222324252627282930 | <!DOCTYPE html><html> <head> <title> Use conditional comments to determine the browser version to solve compatibility issues </title> <meta charset="utf-8"/> </head> <body> <! -- [If IE]> only display in IE6, 7,8, and 9 browsers (not supported in standard IE10 mode) |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
