Use conditional comments to determine the browser version, solve compatibility issues, and comment out the browser version

Source: Internet
Author: User

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 ]><!--[if IE 7 ]><!--[if IE 8 ]><!--[if IE 9 ]>

 

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)               <!--[if !IE]><!-->Only display in non-ie browsers (excluding IE10) <hr/><!--><![endif]-->              <! -- [If IE 9]> display in IE 9 browser               <! -- [If IE 8]> display in IE 8 browser               <! -- [If IE 7]> display in IE 7 browser           <! -- [If IE 6]> display in IE 6 browser           <! -- [If lt IE 10]> display in IE10 or earlier browsers (excluding IE10)           <! -- [If lte IE 9]> display in IE 9 and earlier versions (including IE9)               <! -- [If gt IE 6]> display in IE 6 or later browsers (excluding IE6)           <! -- [If gte IE 7]> display (including IE7) in IE7 and later versions        </body></html>

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.