[技巧心得] 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]-->