<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>
