Home > Developer > JavaScript
The most common measure is to detect navigator. userAgent (this can be omitted for all browsers ).
The other is the condition annotation of IE, this article has a more detailed description of http://www.jb51.net/article/29336.htm
Copy codeThe Code is as follows:
<! -- [If! IE]> <! -->
<Script type = "text/javascript">
Alert ('non-ie ')
</Script>
<! -- <! [Endif] -->
The test result is that this form is available. The only thing to note is <! -- [If IE 8]> the blank space between 'ie 'and '8' is required. if it is dropped, it will be a tragedy.
Conditional annotations Based on IE, there are several variants,
1. Similar to the following format:
Copy codeThe Code is as follows:
<! -- [If IE 6]>
<Input type = "hidden" id = "ieVersion" value = "6"/>
<! [Endif] -->
<! -- [If IE 7]>
<Input type = "hidden" id = "ieVersion" value = "7"/>
<! [Endif] -->
Copy codeThe Code is as follows:
Var ieVersion = (function () {return document. getElementById ('ieversion ')})();
Similarly, you can obtain information about each version, or even add gt, gte, and so on, to determine a type of version at a time.
An example of this writing method is as follows:
Copy codeThe Code is as follows:
<! -- [If IE 6]>
<Html class = "ie6">
<! [Endif] -->
<! -- [If IE 7]>
<Html class = "ie7">
<! [Endif] -->
<! -- [If! IE]> <! -->
<Html> <! -- <! [Endif] -->
So you don't need to use other hack in CSS to avoid loading CSS once more in IE,
Direct
Copy codeThe Code is as follows:
. Ie6 xx {}
. Ie7 xx {}
. Ie8 xx {}
Xx {}
Second, since it can be written on the page, it can also be dynamically generated by JS. I tried google and found someone did this.
The article URL is as follows: http://www.jb51.net/article/29337.htm, which is detailed and simple.
However, the shortcoming is to limit the condition annotation to JS, and CSS is a chicken rib.
To continue, since we can dynamically generate condition comments to identify the IE version, we should also be able to dynamically generate an html Segment Based on the CSS hack of IE and use the style value to determine the version.
The following is the most easy-to-think form. I tested and found that this is true, but I also found a problem. Let's look at the following code:
Copy codeThe Code is as follows:
<Div id = "test_1"> <span style = "color: red; color: # ff6600 \ 0; color: yellow \ 9 \ 0; * color: green; _ color: blue; "> test </span> </div>
<Script type = "text/javascript">
Var test_1 = document. getElementById ('test _ 1 ');
Var test_2 = document. createElement ('div ');
Test_2.innerHTML = '<span style = "color: red; color: # ff6600 \ 0; color: yellow \ 9 \ 0; * color: green; _ color: blue; "> test </span> ';
Console. log ('test _ 1: '+ test_1.firstChild.style.color +' ---- '+ 'test _ 2:' + test_2.firstChild.style.color );
</Script>
Result In IE9: LOG: test_1: yellow ---- test_2: yellow
Result In IE8: LOG: test_1: # ff6600 ---- test_2: # ff6600
Result In IE7: LOG: test_1: green ---- test_2: blue
Result in IE6: test_1: blue ---- test_2: blue (IE6 does not have console. log, so the console. log above needs to be changed to alert)
We can see that the two situations in IE7 are inconsistent. I don't know if it is my IE7 compatibility mode or why. Please advise if you know.
Validation Code:
Copy codeThe Code is as follows:
<Div> <span style = "* color: red; _ color: blue;"> original </span> </div>
<Script>
Var test = document. createElement ('div ');
Test. innerHTML = '<span style = "* color: red; _ color: blue;"> dynamic generation </span> ';
Document. body. appendChild (test );
</Script>
IE7 results:
IE6 results:
The basic principle is similar to the condition annotation of IE. We can check the color value at a time, so the above example is changed: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
