用户名: 密码:
首页 / 常见问题/ 正文
常用到的条件注释判断IE浏览器版本以及csshack
  • 发布人:admin
  • 时间:2021-10-11
  • 点击:204
  • 来源:

一、条件注释简介

  1. IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。
  2. 条件注释只能用于IE5以上。
  3. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准。
  4. 条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
  5. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

二、条件注释属性

  • gt : greater than,选择条件版本以上版本,不包含条件版本
  • lt : less than,选择条件版本以下版本,不包含条件版本
  • gte : greater than or equal,选择条件版本以上版本,包含条件版本
  • lte : less than or equal,选择条件版本以下版本,包含条件版本
  • ! : 选择条件版本以外所有版本,无论高低
项目 范例 说明
! [if !IE] The NOT operator. This is placed immediately in front of the featureoperator, or subexpression to reverse the Boolean meaning of the expression.
NOT运算符。这是摆立即在前面的功能操作员,或子表达式扭转布尔表达式的意义。
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
小于运算符。如果第一个参数小于第二个参数,则返回true。
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
小于或等于运算。如果第一个参数是小于或等于第二个参数,则返回true。
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
大于运算符。如果第一个参数大于第二个参数,则返回true。
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
大于或等于运算。如果第一个参数是大于或等于第二个参数,则返回true。
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
子表达式运营商。在与布尔运算符用于创建更复杂的表达式。
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
AND运算符。如果所有的子表达式计算结果为true,返回true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.
OR运算符。返回true,如果子表达式计算结果为true。

 

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

下面的代码是在非IE浏览器下运行的条件注释

if 条件语句

 

 

 

 

 

XHTML

 

1

2

3

4

5

6

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

/*您使用不是 Internet Explorer*/

<!--<![endif]-->

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

/*您正在使用Internet Explorer version 6或者 一个非IE 浏览器*/

<!--<![endif]-->

 

<!--[if lt IE 9]>
加载CSS1
<!--[else]>
加载CSS2
<![endif]-->

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

方法2:加载CSS2
<!--[if lt IE 9]>
加载CSS1(可以把要重写的写在这里).
<![endif]-->

 

下面在说下IE浏览器的csshack写法,IE浏览器的兼容还是比较重要的,毕竟现在不少浏览器都是使用的IE的内核的。

IE css hack写法

1

2

3

4

5

6

7

body { background: rgba(243,243,243) ; } /* 所有浏览器都支持这样的写法*/

body { _background: rgb(243,243,243) ; } /* 只有IE6才支持这样的写法*/

body { *background: rgb(243,243,243) ; } /* 所有IE浏览器都支持这样的写法*/

body { +background: rgb(243,243,243) ; } /* 只有IE6和IE7浏览器能支持这样的写法*/

body { -background: rgb(243,243,243) ; } /* 据说也只有IE6浏览器能支持,我没测试过*/

body { *+background: rgb(243,243,243) ; } /* IE7和IE10浏览器能支持*/

body { background: rgb(243,243,243) \0; } /* \零 的写法只有IE8及以上浏览器可以支持*/

由于万恶的IE6和IE7,我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器中可实现的效果在IE里却有各种离奇问题,例如IE6、IE7不能良好应对的inline-block和.clearfix.padding问题,好在大部分问题已经有了足够的总结和途径。废话不多说,下面是一些方法区分浏览器的方法。

IE CSS Hack

直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为

#content{
background:red; /* 所有浏览器 */
background:orange\9; /* IE8 */
*background:yellow; /* IE7和IE6 */
+background:green; /* IE7 */
_background:blue; /* IE6 */
}


CSS Hack的缺点是CSS文件无法通过W3C验证,代码阅读时会很奇怪。

方法2:条件注释CSS文件

条件注释是写在html里的只会被IE识别的代码,一般在<head>区域通过不同的条件注释导入不同的CSS,不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”:

<!--[if IE]>
<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />
<![endif]-->

由于IE8下CSS问题较少,一般只需要为IE6、7写一点修正代码。如果需要,可以在ie.css里用CSS Hack对IE6/7进行差异处理。

<!--[if lt IE 8]>
<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />
<![endif]-->

条件注释CSS文件的缺点是会增加至少1次http请求,影响渲染速度,而且维护时不够方便。

条件注释<html>

条件注释<html>跟上面的方法原理一样,只不过这里是给<html>注释不同的class。

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

这样在CSS中使用下面的代码即可区分版本

#content{background:red;}
.ie9 #content{background:orange;}
.ie8 #content{background:yellow;}
.ie7 #content{background:green;}
.ie6 #content{background:blue;}

你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方法不会增加http请求,而且不需要任何hack。

最佳方法

毫无疑问,最好的办法就是用条件注释<html>为CSS提供区分。所有CSS文件可以合并在一起,ie的fix代码与正常规则临近,便于维护,而且没有hack可以让代码符合标准(使用zoom、私有CSS3属性依旧无法通过验证T_T)。