In IE8, IE9 may be good, when we in IE6, IE7 or other browsers to browse these pages, we may find that our page has been unrecognizable, then how to solve the compatibility problem, this article for everyone to the browser compatibility issues, we should meet a lot of, In peacetime to write some pages, in IE8, IE9 may be good, when we in IE6, IE7 or other browsers to browse these pages, we may find that our page has been unrecognizable, as a front-end developers, this is the most crazy problem, then we how to solve these problems?
First of all, the pages we write on different browsers have different problems, because different browsers are not exactly the same rules they follow when they parse the page. For example, ie, different versions of the resolution are different, not to mention the different browser vendors, different kernels. However, when we encounter compatibility issues, we should first check our own code to see if it is their own problem, and then to investigate the browser problem. Also, in the face of compatibility issues, do not always use CSS hack technology, because the CSS hack technology is not respected, therefore, not the last resort, try not to use.
Well, say a lot, below we get to the point:
Commenting on different browser versions
(1), support all IE browser (not including IE10 standard mode)
<!--[if ie]> only ie6,7,8,9 browser display (IE10 standard mode not supported) <! [endif]-->
(2), all non-IE browsers (not including IE10 standard mode)
<!--[if! ie]><!--> only non-IE browser display (IE10 not included) <!--><! [endif]-->
(3), IE10 browser
There is no such thing as a <!--[if IE 9]>, but IE10 is doing a good job, but the page has no difference in IE10, FireFox or Chrome on the layout alone.
(4), IE9 browser
<!--[if IE 9]>ie9 browser display
(5), IE8 browser
<!--[if IE 8]>ie8 browser display
(6), IE7 browser
<!--[if IE 7]>ie7 browser display
(7), IE6 browser
<!--[if IE 6]>ie6 browser display
(8), IE10 the following version of the browser (not including IE10)
<!--[If LT IE 10]>ie10 the following versions of the browser display (excluding IE10)
(9), IE9 and IE9 versions of browsers (including IE9)
<!--[If LTE IE 9]>IE9 and IE9 browser display (including IE9)
(10), IE6 or above version browser (not including IE6)
<!--[if GT IE 6]>ie6 above browser display (IE6 not included)
(11), IE7 and IE7 versions browser
<!--[if GTE IE 7]>ie7 and IE7 browser display (including IE7)
So how do we use it? It is not possible to write the entire page in a separate comment block for compatibility with the above. There are actually two ways to do this:
Method 1, according to different browser version, loading different CSS
If we need to be compatible with IE6, 7, 8 separately, we can do this
Copy CodeThe code is as follows:
<!--[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, according to different browser version, to the HTML or body mount different classes such as
Copy CodeThe code is as follows:
<!--[If LT IE 7]><!--[if IE 7]><!--[if IE 8]><!--[if IE 9]>Finally, let's take a look at what Lt,lte,gt,gte means.
LT: Less than the current version
LTE: Less than or equal to the current version, including itself
GT: Greater than current version
GTE: greater than or equal to the current version, including itself
Well, we're here today, and you probably already know how to handle browser compatibility, so next time we're going to introduce some of the CSS hack technology and go further with browser-compatible
Test code:
Copy CodeThe code is as follows:
<! DOCTYPE html>
<title> use conditional annotations to determine browser version, resolve compatibility issues </title>
<meta charset= "Utf-8"/>
<body>
<!--[if ie]> only ie6,7,8,9 browser display (IE10 standard mode not supported) <!--[if! ie]><!--> only non-IE browser display (IE10 not included) <!--[if IE 9]>ie9 browser display <!--[if IE 8]>ie8 browser display <!--[if IE 7]>ie7 browser display <!--[if IE 6]>ie6 browser display <!--[If LT IE 10]>ie10 the following versions of the browser display (excluding IE10) <!--[If LTE IE 9]>IE9 and IE9 browser display (including IE9) <!--[if GT IE 6]>ie6 above browser display (IE6 not included) <!--[if GTE IE 7]>ie7 and IE7 browser display (including IE7) </body>
Use conditional annotations to determine browser version to resolve page compatibility issues
