IE中的条件注释
作者:ppk
翻译地址:http://www.surfchen.org/?p=94
翻译:surfchen
条件注释只能用于Explorer 5+ Windows(以下简称IE).
如果你安装了多个IE,条件注释(Conditional comments)将会以最高版本的IE为标准(一般为IE 6)。
我听说(但没测试过),当在条件注释中使用了小数点,且只安装了IE5.0的时候,将会产生一个不正确的判断。
条件注释只能在windows Internet Explorer(以下简称IE)下使用,因此我们可以通过条件注释来为IE添加特别的指令。条件注释从IE5开始被支持,它可能在IE5.0,5.5,6里有区别。
我(译者注:指作者)自己也在顶层的框架中使用了一些条件注释。如果你以源代码形式查看本页,你将会看到:
<!--[if IE]>
<style>
div.logo {
margin-left: 10px;
}
</style>
<![endif]-->
一般情况下,div.logo的left margin将为22px。但是,IE有个BUG,就是当它碰到浮动元素(floated elements)的margins时候,它将会以2倍于该元素的实际
margin值来处理。所以我要告诉IE,这个元素是10px(10?11?)。于是我用条件注释告诉了它。这些代码例子将会概括性地说明你能如何使用条件注释以及你不能如何使用条件注释。
- 条件注释的基本结构和HTML的注释(
<!-- -->)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。 - IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
- 条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。我很想把所有特殊的样式放在logo.css里。但是很不幸的是,这看起来不太可能。我也试过根据条件注释,使用
<link>来导入一个额外的样式表,但是因为我只需要一个额外的样式规则,这样会让事情变得复杂很多。当然如果你需要在IE里使用很多的额外的样式,那么使用<link>或许是一个好的方法。
代码如下:
<!--[if IE]> 根据条件判断,这是Internet Explorer<br /> < ![endif]--> <!--[if IE 5]> 根据条件判断,这是Internet Explorer 5<br /> < ![endif]--> <!--[if IE 5.0]> 根据条件判断,这是Internet Explorer 5.0<br /> < ![endif]--> <!--[if IE 5.5]> 根据条件判断,这是Internet Explorer 5.5<br /> < ![endif]--> <!--[if IE 6]> 根据条件判断,这是Internet Explorer 6<br /> < ![endif]--> <!--[if gte IE 5]> 根据条件判断,这是Internet Explorer 5 或者更高<br /> < ![endif]--> <!--[if lt IE 6]> 根据条件判断,这是版小于6的Internet Explorer<br /> < ![endif]--> <!--[if lte IE 5.5]> 根据条件判断,这是Internet Explorer 5.5或更低<br /> < ![endif]-->
- gt: 大于
- lte: 小于或等于
因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能,所以我相信它是可以被放心地使用的。当然,其他浏览器也有可能支持条件判断(到目前为止还没有),但是看起来,他们应该不会使用如<!--[if IE]>这样的语法。
我很节俭地使用条件判断。首先我会尝试着去寻找在IE上一个真正的CSS解决方法。如果找不到,我将会毫不犹豫地使用条件判断。
Comment标签:
一个读者告诉我,IE(Windows和Mac)支持
<comment>标签(非标准)。<p>这 <comment>不</comment> 是Internet Explorer.</p>
这
本文主题IE中的条件注释