日期:2014-05-17  浏览次数:20565 次

IE条件注释与CSS Hacks(备记)

IE条件注释与CSS Hacks ?

Written by Rainbow On 2010-03-02 With 2 Comments

我们知道,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
<!--[
if IE]
>
  	<link rel=
"stylesheet"
 type=
"text/css"
 href=
"all-ie-only.css"
 />
  <![
endif]
-->

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

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

Target IE 7 ONLY ( 仅IE7可识别 )

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

Target IE 6 ONLY(仅IE6可识别)