[技巧心得] IE条件注释与CSS Hacks

我们知道,IE6的存在,因其预装于目前市场占有率最大的 Windows XP 操作系统。对

于老态龙钟的IE6,说拜拜还需要很长的 时间

IE虽然给我们 网页 设计师 ,带来了不少多麻烦,还好,IE 条件 注释,给我们 解决 浏览器

兼容问题带来了一个很好的方法。

一、什么是IE条件注释?

IE条件注释,顾名思义就是使用IE特有的条件语句来显示代码块。

这些巧妙的逻辑片段只能被IE浏览器所支持,其它的浏览器理解为纯粹的HTML注释,不

起任何作用。条件注释在IE5中首次出现,并且得到了Widnows浏览器所有后续版本的

支持。IE条件注释及其有效,而且非常容易记住。通过这些技巧,我们可以为基于

Windows的IE5、6、7、8添加一些特殊的行为。这样做的好处是,HTML和CSS代码

可以通过验证。主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中。这

样,当你不需要这些东西,或者有所更改的时候,就需要维护很多的地方。好处是通过

这种方式使用条件注释,可以很轻松的管理项目中的目标浏览器,并使得CSS补丁文件

保持独立自由。更重要的是它帮助我们优化了CSS样式表,保证了主要样式表的干净,

这对于大型网站来说就很重要了,也许你还没有感觉到它的可爱之处。

作为有Web标准意识的开发者,我们始终应该首先在大部分现有的兼容标准的浏览器上

测试我们的设计,然后再为那些稍作细微修改就能回到正轨的浏览器提供补丁。

二、条件注释使用方法

条件注释属性

* gt : greater than,选择条件版本以上版本,不包含条件版本

* lt : less than,选择条件版本以下版本,不包含条件版本

* gte : greater than or equal,选择条件版本以上版本,包含条件版本

* lte : less than or equal,选择条件版本以下版本,包含条件版本

* ! : 选择条件版本以外所有版本,无论高低

The Code

我们概括性地说明一下你如何使用条件注释,首先,我们应该把你所有的CSS 等CSS文

件放在中。条件注释的基本结构和HTML的注释()是一样的。因此 ,IE以外的浏览器将

会把它们看作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的

页面内容一样解析条件注释里的内容。条件注释使用的是HTML的注释结构,因此他们只

能使用在HTML文件里,而不能在CSS文件中使用。

Target ALL VERSIONS of IE( 所有的IE可识别 )

 
<!--[if IE]>   <link rel="stylesheet" type="text/css" href="all-ie-only.css" />  <![endif]-->

Target everything EXCEPT IE (除IE外都可识别 )

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

Target IE 7 ONLY ( 仅IE7可识别 )

 
<!--[if IE 7]>  <link rel="stylesheet" type="text/css" href="ie7.css">  <![endif]-->

Target IE 6 ONLY(仅IE6可识别)

 
<!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="ie6.css" />  <![endif]-->

Target IE 5 ONLY(仅IE5.0与IE5.5可以识别 )

 
<!--[if IE 5]>  <link rel="stylesheet" type="text/css" href="ie5.css" />  <![endif]-->

Target IE 5.0 ONLY (只有IE5.0可以识别 )
Target IE 5.5 ONLY(只有IE5.0可以识别)

 
<!--[if IE 5.5000]>  <link rel="stylesheet" type="text/css" href="ie55.css" />  <![endif]-->

Target IE 6 and LOWER(IE6和IE6以下的)

 
<!--[if lt IE 7]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />  <![endif]-->

 
<!--[if lte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />  <![endif]-->

Target IE 7 and LOWER(IE7和IE7以下的)
 
<!--[if lt IE 8]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />  <![endif]-->

 
<!--[if lte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />  <![endif]-->

Target IE 8 and LOWER(IE8和IE8以下的)

 
<!--[if lt IE 9]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />  <![endif]-->

 
<!--[if lte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />  <![endif]-->

Target IE 6 and HIGHER(IE6和IE6以上的)

 
<!--[if gt IE 5.5]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />  <![endif]-->

 
<!--[if gte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />  <![endif]-->

Target IE 7 and HIGHER(IE7和IE7以上的)

 
<!--[if gt IE 6]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />  <![endif]-->

 
<!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />  <![endif]-->

Target IE 8 and HIGHER(IE8和IE8以上的)

 
<!--[if gt IE 7]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />  <![endif]-->

 
<!--[if gte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />  <![endif]-->

Universal IE 6 CSS(通用的IE 6样式)

处理IE 6和IE6以下的版本始终是一个超特殊的挑战。老态龙钟的IE6,还保持着高额的

市场占有率,还不能彻底的放弃它,不然会有许多的客户抱怨我们。不过也有些人正在

放弃对它的支持,包括大企业,大型 网络 应用,甚至政府。有一个不失落的 ,不放弃的

解决办法,那就是使用一个特精简的样式 universal IE 6 CSS.,然后为IE 7和以上

(和所有其他浏览器)的应用常规的CSS。

 
<!--[if !IE 6]><!-->  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />  <!--<![endif]-->   
<!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />  <![endif]-->   
<!--[if lte IE 6]>  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />  <![endif]-->





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值