The most common one is to detect navigator.userAgent (this can be used for all browsers, skip it). The other is IE’s conditional comments. This article has a more detailed explanationhttp://www.jb51.net/article/29336.htm Copy code The code is as follows: <br>alert('Not IE') <br></ script> <br><!--<![endif ]--> <br> </div> <br>The result of my test is that this form is available. The only thing that needs attention is that the space character between 'IE' and '8' in <!-- [if IE 8]> is necessary. If it is missing, it will be a tragedy. <br><br>There are several variant versions of conditional comments based on IE, <br><strong>First, similar to the following form: <br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="17154" class="copybut" id="copybut17154" onclick="doCopy('code17154')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code17154"> <br><!--[if IE 6]> <br><input type="hidden" id=" ieVersion" value="6" /> <br><![endif]--> <br><!--[if IE 7]> <br><input type="hidden" id ="ieVersion" value="7" /> <br><![endif]--> <br> </div> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="95128" class="copybut" id="copybut95128" onclick="doCopy('code95128')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code95128"> <br>var ieVersion = (function(){ return document.getElementById('ieVersion')})(); <br> </div> <br> By analogy, you can get information about each version, and you can even add gt, gte, etc. to determine one type of version at a time. <br>An example of this writing method is: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="34649" class="copybut" id="copybut34649" onclick="doCopy('code34649')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code34649"> <br><!--[if IE 6]> <br><html class="ie6"> <br><![endif]--> <br><!--[if IE 7]> <br><html class="ie7"> <br><![endif]--> <br><!--[if !IE]><!-- > <br><html><!--<![endif]--> <br> </div> <br>So there is no need for other hacks in CSS, thus avoiding the need for hacks in IE Load the CSS one more time, <br>directly<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="16086" class="copybut" id="copybut16086" onclick="doCopy('code16086')"><u>copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code16086"> <br>.ie6 xx {} <br>.ie7 xx{} <br>.ie8 xx{} <br>xx{} <br> </div> <br>Second, since it can be written in the page, of course it can also be dynamically generated by JS . I googled it and found that some people actually do this. <br>The article address is as follows: <a href="http://www.jb51.net/article/29337.htm" target="_blank">http://www.jb51.net/article/29337.htm</a>, the writing is quite detailed and the principle is very simple. <br>However, the shortcoming is that conditional comments are limited to JS, which is useless for CSS. <br>Continuing, since conditional comments can be dynamically generated to identify the IE version, the CSS hack based on IE should also be able to dynamically generate an HTML fragment and use style values to determine the version. <br>The following is the easiest form to think of. I tested and found that it works, but I also found a problem. Look at the following piece of code: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="98332" class="copybut" id="copybut98332" onclick="doCopy('code98332')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code98332"> <br><div id="test_1"><span style="color: red; color: #ff6600<BR>The result under IE9: LOG: test_1:yellow----test_2:yellow <BR>The result under IE8: LOG: test_1:#ff6600----test_2:#ff6600 <BR>The result under IE7: LOG: test_1:green----test_2:blue <BR>The result under IE6: test_1:blue ----test_2:blue (IE6 does not have console.log, so the above console.log needs to be replaced by alert) <br><br>You should have noticed the above problem. The two situations are inconsistent under IE7. I don’t know if it is a problem with my IE7 compatibility mode or some other reason. If you know, please give me some advice. <BR>Confirmation code: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="25036" class="copybut" id="copybut25036" onclick="doCopy('code25036')"><U>Copy code</U></a></span> The code is as follows: </div><div class="codebody" id="code25036"> <BR><div>< span style="*color:red; _color:blue;">original</span></div> <br><script> <br>var test = document.createElement('div'); <br>test.innerHTML = '<span style="*color:red; _color:blue;">Dynamicly generated</span>'; <br>document.body.appendChild(test); <br>< ;/script> <br> </div> <br> <p>IE7 results: </p> <p><img alt="" src="http://files.jb51.net/upload/201201/20120104165349856.jpg"></p> <p>IE6 results: </p> <p><img alt="" src="http://files.jb51.net/upload/201201/20120104165349669.jpg"></p>The basic principle is similar to the conditional comment of IE. We only need to detect the color value once, so change the above example to: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="44926" class="copybut" id="copybut44926" onclick="doCopy('code44926')"><u> Copy the code </u></a></span> The code is as follows: </div> <div class="codebody" id="code44926"> <br><div id="test_1"><span style="color: red; color: #ff6600</div>