IE6终极备忘单——对IE6单独兼容

mseed · 发表于 2012-1-3 10:45:27

兼容IE6的第一步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6；有几种方法可以区分开IE6：IE特有条件注释、CSS选择器、JavaScript，我们将逐一讨论。

使用IE特有条件注释

微软给IE添加了条件注释以区分不同版本，任何东西都可以塞进条件注释里：标签、JavaScript、js文件、css、内联样式。可以使用条件注释来针对某一个IE浏览器版本来编写代码。

规则如下：（译注：可参考IE 特有注释(hack)）

这段文字会在所有浏览器显示
<!--[if lte IE 6]>
这段文字仅显示在 IE6及IE6以下版本。
This message will only appear in versions of Internet Explorer less than or equal to version 6.
<![endif]-->
<!--[if gte IE 6]>
这段文字仅显示在 IE6及IE6以上版本。
This message will only appear in versions of Internet Explorer greater than or equal to version 6.
<![endif]-->
<!--[if gt IE 6]>
这段文字仅显示在 IE6以上版本（不包含IE6）。
This message will only appear in versions of Internet Explorer greater than version 6.
<![endif]-->
<!--[if IE 5.5]>
这段文字仅显示在 IE5.5。
This message will only appear in Internet Explorer 5.5.
<![endif]-->
<!--[if lte IE 6]>
[*]
<![endif]-->
这段文字会在所有浏览器显示

复制代码

使用条件注释加载css的好处是这些样式是独立于其他css文件的，因此不会在编写兼容代码时弄得一团糟；而且当IE6的市场份额降低到不需要兼容时，可以快速的清理掉。
使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数，所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件，因为js文件会造成阻滞，在js未加载完之前其余文件都不会被加载；对于js请使用JavaScript程序来区分浏览器而非条件注释。
使用CSS选择器区分开IE6
如果你不打算使用条件注释，CSS选择器是另外一个区分开IE6的办法，IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。
示例：

<style type="text/css" >
/* IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;}
</style>
<div>
<p class="header">Some Header Text Here
</div>

复制代码

这个方法的缺点是容易把样式表弄得一团糟，所以一定要写好注释说明。
在示例中，针对IE6写的样式在其他浏览器中也会执行，但(标准浏览器中)之后的子选择器覆盖了之前的申明，而IE6不支持子选择器所以忽略了它。
扩展阅读：

使用JavaScript区分开IE6
如果你想要使用JavaScript区分开IE6，请看示例：

//原生JavaScript
if(typeof document.body.style.maxHeight === "undefined") {
alert('IE6 Detected');
}
//MooTools（框架）
if (Browser.Engine.trident4) {
alert('IE6 Detected');
}
//jQuery（框架）
if (($.browser.msie) && ($.browser.version == "6.0")){
alert('IE6 Detected');
}

复制代码

扩展阅读：

		自动登录	找回密码
密码			立即注册

[教程] IE6终极备忘单——对IE6单独兼容

评分

站长推荐 /1