(转载)IE条件注释

我们知道,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 可识别 )

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

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

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

Target IE 7 ONLY ( 仅 IE7 可识别 )

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

Target IE 6 ONLY(仅 IE6 可识别)

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

Target IE 5 ONLY(只有 IE5 可以识别)

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- [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 以下的) ```html
<!-- [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 以下的)

1
2
3
4
5
6
<!-- [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 以上的)

1
2
3
4
5
6
<!-- [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 以上的)

1
2
3
4
5
6
<!-- [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 以上的)

1
2
3
4
5
6
<!-- [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。

1
2
3
4
5
6
7
8
<!-- [if !IE 6]><!-->
<!--<![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]-->
---- 本文结束,感谢您的阅读 ----