用条件注释判断浏览器版本,解决兼容问题 - jerrylsxu

<p>对于浏览器兼容问题，我们应该碰到很多了，在平时写一些页面时，在IE8、IE9上可能好好的，当我们在IE6、IE7或者是其他的浏览器上再浏览这些页面时，可能会发现我们的页面已经面目全非了，作为一名前端开发人员，这是最让人发疯的问题了，那么我们该怎么解决这些问题呢？</p> <p>首先，我们写的页面在不同的浏览器上之所以会出现表现不同的问题，是因为不同的浏览器在解析页面时，他们所遵循的规则并不是完全相同的。比如IE，不同的版本解析都不同，何况是不同的浏览器厂商，不同的内核呢。但是我们在遇到兼容性问题时，应该首先检查我们自己写的代码，看看是不是自己的问题，然后再去追究浏览器的问题。还有，在遇到兼容性问题时，不要动不动就用CSS Hack技术，因为CSS Hack技术并不是W3C所推崇的，因此，不到万不得已，尽量不要用。</p> <p>好了，说了一大堆，下面我们进入正题：</p> <p>注释不同的浏览器版本</p> <p class="entry-title">(1)、支持所有的IE浏览器（不包括IE10标准模式）</p> <div> <div id="highlighter_756568" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if IE]>只有IE6,7,8,9浏览器显示(IE10标准模式不支持)<![endif]--></code></div> </div> </td> </tr> </tbody> </table> </div> </div> <p class="entry-title">(2)、所有非IE浏览器（不包括IE10标准模式）</p> <div> <div id="highlighter_591664" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1<table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if !IE]><!--></code><code class="html plain">只有非IE浏览器显示(不包括IE10)</code><code class="html comments"><!--><![endif]--></code> </div> </div> </td> </tr> </tbody> </table> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if !IE]><!--></code><code class="html plain">只有非IE浏览器显示(不包括IE10)</code><code class="html comments"><!--><![endif]--></code> </div> </div> </td> </tr> </tbody> </table> <p class="entry-title"> </p> <p>(3)、IE10浏览器</p> <p class="entry-title">目前还没有找到该版本浏览器的像<!--[if IE 9]>似的单独注释，但IE10做得很不错了，就单单布局而言，页面在IE10、FireFox、Chrome上的表现已经没有什么区别了。</p> <div>(4)、IE9浏览器<div id="highlighter_478483" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if IE 9]>IE9浏览器显示<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table> </div> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if IE 9]>IE9浏览器显示<hr/><![endif]--></code><p class="entry-title"> </p> </div> </div> </td> </tr> </tbody> </table> <div> <div id="highlighter_855136" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if IE 8]>IE8浏览器显示<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table>(5)、IE8浏览器</div> </div> <p class="entry-title"> </p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1 </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if IE 8]>IE8浏览器显示<hr/><![endif]--></code><div> <div id="highlighter_393296" class="syntaxhighlighter html"> </div> </div> </div> </div> </td> </tr> </tbody> </table> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if IE 7]>IE7浏览器显示<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table> </div> </div>(6)、IE7浏览器<p class="entry-title"> </p> <div> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1<div id="highlighter_185311" class="syntaxhighlighter html"> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if IE 7]>IE7浏览器显示<hr/><![endif]--></code><table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if IE 6]>IE6浏览器显示<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </td> </tr> </tbody> </table> (7)、IE6浏览器 <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1 </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if IE 6]>IE6浏览器显示<hr/><![endif]--></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> <p class="entry-title">(8)、IE10以下版本浏览器(不包括IE10)</p> <div> <div id="highlighter_588901" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1<table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if lt IE 10]>IE10以下版本浏览器显示(不包括IE10)<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if lt IE 10]>IE10以下版本浏览器显示(不包括IE10)<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table> <p class="entry-title"> </p> <div>(9)、IE9及IE9以下版本浏览器(包括IE9)<div id="highlighter_991519" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if lte IE 9]>IE9及IE9以下版本浏览器显示(包括IE9)<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table> </div> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if lte IE 9]>IE9及IE9以下版本浏览器显示(包括IE9)<hr/><![endif]--></code><p class="entry-title"> </p> </div> </div> </td> </tr> </tbody> </table> <div> <div id="highlighter_621395" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if gt IE 6]>IE6以上版本浏览器显示(不含IE6)<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table>(10)、IE6以上版本浏览器(不含IE6)</div> </div> <p class="entry-title"> </p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1 </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if gt IE 6]>IE6以上版本浏览器显示(不含IE6)<hr/><![endif]--></code><div> <div id="highlighter_692848" class="syntaxhighlighter html"> </div> </div> </div> </div> </td> </tr> </tbody> </table> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if gte IE 7]>IE7及IE7以上版本浏览器显示(包含IE7)<hr/><![endif]--></code></div> </div> </td> </tr> </tbody> </table> </div> </div>(11)、IE7及IE7以上版本浏览器<p> </p> <p class="entry-title"> </p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1 </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if gte IE 7]>IE7及IE7以上版本浏览器显示(包含IE7)<hr/><![endif]--></code><p> </p> </div> </div> </td> </tr> </tbody> </table> <div> <div id="highlighter_809695" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if IE 8]></code></div> <div class="line number2 index1 alt1"> <code class="html spaces">    </code><code class="html comments"><link rel="stylesheet" type="text/css" href="ie8.cdd"></code> </div> <div class="line number3 index2 alt2"><code class="html comments"><![endif]--></code></div> <div class="line number4 index3 alt1"> <code class="html spaces">     </code> </div> <div class="line number5 index4 alt2"><code class="html comments"><!--[if IE 7]></code></div> <div class="line number6 index5 alt1"> <code class="html spaces">    </code><code class="html comments"><link rel="stylesheet" type="text/css" href="ie7.cdd"></code> </div> <div class="line number7 index6 alt2"><code class="html comments"><![endif]--></code></div> <div class="line number8 index7 alt1"> <code class="html spaces">     </code> </div> <div class="line number9 index8 alt2"><code class="html comments"><!--[if IE 6]></code></div> <div class="line number10 index9 alt1"> <code class="html spaces">    </code><code class="html comments"><link rel="stylesheet" type="text/css" href="ie6.cdd"></code> </div> <div class="line number11 index10 alt2"><code class="html comments"><![endif]--></code></div> </div> </td> </tr> </tbody> </table>那么我们该怎么运用呢？我们不可能为了兼容像上面那么写，把整页的内容分别写在不同的注释块内。其实这里有两种方法： 方法1、根据不同的浏览器版本，载入不同的css 如我们需要分别兼容IE6、7、8，我们可以这样做 <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1 <div class="line number2 index1 alt1">2 <div class="line number3 index2 alt2">3 <div class="line number4 index3 alt1">4 <div class="line number5 index4 alt2">5 <div class="line number6 index5 alt1">6 <div class="line number7 index6 alt2">7 <div class="line number8 index7 alt1">8 <div class="line number9 index8 alt2">9 <div class="line number10 index9 alt1">10 <div class="line number11 index10 alt2">11 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if IE 8]></code> <div class="line number2 index1 alt1"> <code class="html spaces">    </code><code class="html comments"><link rel="stylesheet" type="text/css" href="ie8.cdd"></code> <div class="line number3 index2 alt2"> <code class="html comments"><![endif]--></code> <div class="line number4 index3 alt1"> <code class="html spaces">     </code>  <div class="line number5 index4 alt2"> <code class="html comments"><!--[if IE 7]></code> <div class="line number6 index5 alt1"> <code class="html spaces">    </code><code class="html comments"><link rel="stylesheet" type="text/css" href="ie7.cdd"></code> <div class="line number7 index6 alt2"> <code class="html comments"><![endif]--></code> <div class="line number8 index7 alt1"> <code class="html spaces">     </code>  <div class="line number9 index8 alt2"> <code class="html comments"><!--[if IE 6]></code> <div class="line number10 index9 alt1"> <code class="html spaces">    </code><code class="html comments"><link rel="stylesheet" type="text/css" href="ie6.cdd"></code> <div class="line number11 index10 alt2"> <code class="html comments"><![endif]--></code> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> <p class="entry-title">方法2、根据不同的浏览器版本，给html或body挂载不同的类如</p> <div> <div id="highlighter_673278" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div class="行号1 index0 alt2">1<table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html comments"><!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]--></code></div> <div class="line number2 index1 alt1"><code class="html comments"><!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]--></code></div> <div class="line number3 index2 alt2"><code class="html comments"><!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]--></code></div> <div class="line number4 index3 alt1"><code class="html comments"><!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]--></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1">2 <div class="line number3 index2 alt2">3 <div class="line number4 index3 alt1">4 </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2"> <code class="html comments"><!--[if lt IE 7]><html class="ie6" lang="zh-cn"> <![endif]--></code> <div class="line number2 index1 alt1"> <code class="html comments"><!--[如果 IE 7 ]><html class="ie7" lang="zh-cn">< ;![endif]--></code> <div class="line number3 index2 alt2"> <code class="html comments"><!--[如果 IE 8 ]><html class="ie8" lang="zh-cn">< ;![endif]--></code> <div class="line number4 index3 alt1"> <code class="html comments"><!--[如果 IE 9 ]><html class="ie9" lang="zh-cn">< ;![endif]--></code> </div> </div> </div> </div> </div> </td> </tr> 表> <p> </p> <p>最后我们看一下lt，lte，gt，gte分别表示什么</p> <p>lt：小于当前版本</p> <p>lte：小于或等于当前版本，包括本身 </p> <p>gt：大于当前版本</p> <p>gte：大于或等于当前版本，包括本身</p> <p> </p> <p>好了，我们今天就到这里，大家可能已经知道怎么简单的处理浏览器兼容了，那么下次我们接着介绍一些CSS Hack技术，更进一步的处理浏览器兼容</p> <p> </p> <p class="entry-title">测试代码：</p> <div> <div id="highlighter_131251" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> <div class="line number12 index11 alt1">12</div> <div class="line number13 index12 alt2">13</div> <div class="line number14 index13 alt1">14</div> <div class="line number15 index14 alt2">15</div> <div class="line number16 index15 alt1">16</div> <div class="line number17 index16 alt2">17</div> <div class="line number18 index17 alt1">18</div> <div class="line number19 index18 alt2">19</div> <div class="line number20 index19 alt1">20</div> <div class="line number21 index20 alt2">21</div> <div class="line number22 index21 alt1">22</div> <div class="line number23 index22 alt2">23</div> <div class="line number24 index23 alt1">24</div> <div class="line number25 index24 alt2">25</div> <div class="line number26 index25 alt1">26</div> <div class="line number27 index26 alt2">27</div> <div class="line number28 index27 alt1">28</div> <div class="line number29 index28 alt2">29</div> <div class="line number30 index29 alt1">30</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><!DOCTYPE html></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">> 用条件注释判断浏览器版本,解决兼容问题 </</code><code class="html keyword">title</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html color1">charset</code><code class="html plain">=</code><code class="html string">"utf-8"</code><code class="html plain">/></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2"> <code class="html spaces">     </code> </div> <div class="line number8 index7 alt1"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if IE]>只有IE6,7,8,9浏览器显示(IE10标准模式不支持)<hr/><![endif]--></code> </div> <div class="line number10 index9 alt1"> <code class="html spaces">         </code> </div> <div class="line number11 index10 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if !IE]><!--></code><code class="html plain">只有非IE浏览器显示(不包括IE10)<</code><code class="html keyword">hr</code><code class="html plain">/></code><code class="html comments"><!--><![endif]--></code> </div> <div class="line number12 index11 alt1"> <code class="html spaces">         </code> </div> <div class="line number13 index12 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if IE 9]>IE9浏览器显示<hr/><![endif]--></code> </div> <div class="line number14 index13 alt1"> <code class="html spaces">         </code> </div> <div class="line number15 index14 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if IE 8]>IE8浏览器显示<hr/><![endif]--></code> </div> <div class="line number16 index15 alt1"> <code class="html spaces">         </code> </div> <div class="line number17 index16 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if IE 7]>IE7浏览器显示<hr/><![endif]--></code> </div> <div class="line number18 index17 alt1"> <code class="html spaces">     </code> </div> <div class="line number19 index18 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if IE 6]>IE6浏览器显示<hr/><![endif]--></code> </div> <div class="line number20 index19 alt1"> <code class="html spaces">     </code> </div> <div class="line number21 index20 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if lt IE 10]>IE10以下版本浏览器显示(不包括IE10)<hr/><![endif]--></code> </div> <div class="line number22 index21 alt1"> <code class="html spaces">     </code> </div> <div class="line number23 index22 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if lte IE 9]>IE9及IE9以下版本浏览器显示(包括IE9)<hr/><![endif]--></code> </div> <div class="line number24 index23 alt1"> <code class="html spaces">         </code> </div> <div class="line number25 index24 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if gt IE 6]>IE6以上版本浏览器显示(不含IE6)<hr/><![endif]--></code> </div> <div class="line number26 index25 alt1"> <code class="html spaces">     </code> </div> <div class="line number27 index26 alt2"> <code class="html spaces">    </code><code class="html comments"><!--[if gte IE 7]>IE7及IE7以上版本浏览器显示(包含IE7)<hr/><![endif]--></code> </div> <div class="line number28 index27 alt1"> <code class="html spaces">     </code> </div> <div class="line number29 index28 alt2"> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> </div> <div class="line number30 index29 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> <div class="article-bottom"> <p> </p> </div> <div id="MySignature"></div> <div class="clear"></div> </table> </div> </div> </div>