html 判断IE版本并加载对应的css，js

Love The Way You Lie 2022-05-23 12:44 138阅读 0赞

我们常常会在网页的HTML里面看到形如\[if lte IE 9\]……\[endif\]的代码，表示的是限定某些浏览器版本才能执行的语句，那么这些判断语句的规则是什么呢？请看下文：

除IE外都可识别

<table style="margin:0px;padding:0px;color:rgb(0,0,0);font-family:'微软雅黑', Arial, '宋体';font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;"> 
   <th style="margin:0px;padding:0px;">项目</th> 
   <th style="margin:0px;padding:0px;">范例</th> 
   <th style="margin:0px;padding:0px;">说明</th> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:0px;">!</td> 
   <td style="margin:0px;padding:0px;">[if !IE]</td> 
   <td style="margin:0px;padding:0px;">The NOT operator. This is placed immediately in front of the&nbsp;feature,&nbsp;operator, or&nbsp;subexpression&nbsp;to reverse the Boolean meaning of the expression.<br style="margin:0px;padding:0px;">NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:0px;">lt</td> 
   <td style="margin:0px;padding:0px;">[if lt IE 5.5]</td> 
   <td style="margin:0px;padding:0px;">The less-than operator. Returns true if the first argument is less than the second argument.<br style="margin:0px;padding:0px;">小于运算符。如果第一个参数小于第二个参数，则返回true。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:0px;">lte</td> 
   <td style="margin:0px;padding:0px;">[if lte IE 6]</td> 
   <td style="margin:0px;padding:0px;">The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.<br style="margin:0px;padding:0px;">小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:0px;">gt</td> 
   <td style="margin:0px;padding:0px;">[if gt IE 5]</td> 
   <td style="margin:0px;padding:0px;">The greater-than operator. Returns true if the first argument is greater than the second argument.<br style="margin:0px;padding:0px;">大于运算符。如果第一个参数大于第二个参数，则返回true。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:0px;">gte</td> 
   <td style="margin:0px;padding:0px;">[if gte IE 7]</td> 
   <td style="margin:0px;padding:0px;">The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.<br style="margin:0px;padding:0px;">大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:0px;">( )</td> 
   <td style="margin:0px;padding:0px;">[if !(IE 7)]</td> 
   <td style="margin:0px;padding:0px;">Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.<br style="margin:0px;padding:0px;">子表达式运营商。在与布尔运算符用于创建更复杂的表达式。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:0px;">&amp;</td> 
   <td style="margin:0px;padding:0px;">[if (gt IE 5)&amp;(lt IE 7)]</td> 
   <td style="margin:0px;padding:0px;">The AND operator. Returns true if all subexpressions evaluate to true<br style="margin:0px;padding:0px;">AND运算符。如果所有的子表达式计算结果为true，返回true</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:0px;">|</td> 
   <td style="margin:0px;padding:0px;">[if (IE 6)|(IE 7)]</td> 
   <td style="margin:0px;padding:0px;">The OR operator. Returns true if any of the subexpressions evaluates to true.<br style="margin:0px;padding:0px;">OR运算符。返回true，如果子表达式计算结果为true。</td> 
  </tr> 
 </tbody> 
</table>

这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范,  
如果把ELSE语句去掉,则正确.

方法1：

加载CSS2

<!--\[if lte IE 6\]>

<!\[endif\]-->

IE6及其以下版本可见

<!--\[if lte IE 7\]>

<!\[endif\]-->

IE7及其以下版本可见

<!--\[if IE 6\]>

<!\[endif\]-->

只有IE6版本可见

<!\[if !IE\]>

<!\[endif\]>

除了IE以外的版本

<!--\[if lt IE 8\]>

<!\[endif\]-->

IE8及其以下的版本可见

<!--\[if gte IE 7\]>

<!\[endif\]-->

IE7及其以下的版本可见

用法：

（1）

可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的） <!––\[if IE\]>

<h1>您正在使用IE浏览器</h1> <!––\[if IE 5\]>

<!––\[if IE 5.0\]>

<!––\[if IE 5.5\]>

<!––\[if IE 6\]>

<!––\[if IE 7\]>

<!\[endif\]––>

那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢，可以使用<!–\[if ls IE 5\]>，当然，根据条件注释只能在IE5+的环境之下，所以<!–\[if ls IE 5\]>根本不会被执行。 lte：就是Less than or equal to的简写，也就是小于或等于的意思。 lt ：就是Less than的简写，也就是小于的意思。 gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 gt ：就是Greater than的简写，也就是大于的意思。 ! ： 就是不等于的意思，跟javascript里的不等于判断符相同