芒果小站 » IE

抛弃 CSS Hacks 后的浏览器兼容方案

芒果 — Wed, 16 Nov 2011 13:27:47 +0000

如果你看过之前发在芒果小站的《CSS 忍者：安全的 CSS hacks 秘籍》这篇文章，应该基本清楚了通过 IE 条件注释替代 CSS Hacks 的技巧。最近考虑在项目中实际应用这个方案。

一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本，当然在 IE9 开始逐步推向市场后，又会有更多的衍生版本。所以我目前只考虑 IE7~9 版本的兼容情况。涉及到的条件注释代码如下：

使用说明如下：

.test {
    /* 针对非 ie 浏览器的样式 */
}
.ie .test {
    /* 针对所有 ie 版本的样式 */
}
.ie6 .test {
    /* 针对 ie6 的样式 */
}
...
.ie9 .test {
    /* 针对 ie9 的样式 */
}

之前那篇文章里也有同学提出通过 PHP 判断 UA 参数并动态输出样式表的方法，这个虽然是简洁明了，但和后端代码耦合在一起，总觉得不是一回事。况且实际应用中很多情况下会将页面模板化，做动态输出并不非常适合。

另外，国内各大双核高速安全的壳浏览器还没有经过测试，这个需要再做了解。

2011.11.18 日补充：

附上一份 demo，请使用不同版本 ie 浏览器预览该演示页面：cross_browser_compatible_no_css_hacks.html

一个编码引发的血案

芒果 — Sat, 08 Oct 2011 14:52:49 +0000

因特网通过各种编码字符集解决了多语种的兼容，由于历史原因，绝大部分中文网站使用 GBK 或者 GB2312 两种编码。由于网络应用趋于复杂化，越来越多的 Ajax 数据交互，硬生生的 GBK 编码已经不符合时代要求，所以说来说去 utf-8 还是王道。

在 IE6/IE7 浏览器下，外部 javascript 文件编码和页面编码不一致时，会导致变量未定义。听起来很骇人听闻？假如页面是 GBK 编码，页面包含以下代码：

Foo.init({...});

而其引用的外部 JS 文件是 utf-8 编码，文件包含以下代码：

var Foo = {};

这样一来伟大的 IE6/IE7 就瞬间挂了。它会友好地提示你 Foo 变量未定义。

这一切的一切，只是因为一个文件编码问题。外部资源如果未指定编码，则 IE6/IE7 下默认以页面编码为准。解决方案很简单，在外部 JS 文件引入时候加上 charset=”utf-8″ 属性就可以了。

反之，如果外部资源是 GBK 编码，使用 charset=”gbk” 即可。

IE8 中关于 colspan 属性的 bug

芒果 — Thu, 14 Jul 2011 09:43:30 +0000

IE8 认为所有的表格单元格都具有 colspan 属性。因此如果需要单独针对具有 colspan 属性的单元格设置样式，就有点棘手了。

td[colspan],
th[colspan] {
/* 注意：不管单元格是否有 colspan 属性，在 IE8 中该样式一律是生效的 */
background: red;
}

你期望的结果可能是酱紫的：

但往往在 IE8 下，样式被应用到了所有单元格：

这个 bug 仅限于 IE8 浏览器，IE7 和 IE9 都没有这个问题。IE6 本身并不支持属性选择器，就不说了。不但如此，IE8 还认为这个莫须有的 colspan 值为 1，因此以下选择器均无效。

th[colspan],
th[colspan="1"],
th[colspan*="1"],
th[colspan^="1"],
th[colspan$="1"],
td[colspan],
td[colspan="1"],
td[colspan*="1"],
td[colspan^="1"],
td[colspan$="1"] {
/* IE8 中所有可能出现问题的情况 */
}

解决方案：

如果你确实需要使得该选择器能在 IE8 下正常工作，可以使用给 colspan 属性赋值的方法实现，但必须保证属性值不为 1，看起来有点糟糕，但的确是奏效的。

th[colspan*="0"],
th[colspan*="2"],
th[colspan*="3"],
th[colspan*="4"],
th[colspan*="5"],
th[colspan*="6"],
th[colspan*="7"],
th[colspan*="8"],
th[colspan*="9"],
th[colspan*="11"] {
/* styles */
}
td[colspan*="0"],
td[colspan*="2"],
td[colspan*="3"],
td[colspan*="4"],
td[colspan*="5"],
td[colspan*="6"],
td[colspan*="7"],
td[colspan*="8"],
td[colspan*="9"],
td[colspan*="11"] {
/* styles */
}

英文原稿：IE 8 Thinks All Table Cells Have a Colspan | CSS-Tricks
翻译整理：IE8 中关于 colspan 属性的 bug | 芒果小站

表单中的隐藏域重置

芒果 — Mon, 16 May 2011 05:09:58 +0000

在 DOM 中，表单重置非常简单，使用或者

修复 IE 不显示 PNG 图片

芒果 — Thu, 07 Apr 2011 12:56:38 +0000

新建 txt 文件，拷贝以下代码。并另存为 .reg 文件。执行添加注册表信息即可。

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\MIME\Database\Content Type\image/png]
"Extension"=".png"
"Image Filter CLSID"="{A3CCEDF7-2DE2-11D0-86F4-00A0C913F750}"

[HKEY_CLASSES_ROOT\MIME\Database\Content Type\image/png\Bits]
"0"=hex:08,00,00,00,ff,ff,ff,ff,ff,ff,ff,ff,89,50,4e,47,0d,0a,1a,0a

浏览器简史

芒果 — Mon, 28 Mar 2011 03:17:31 +0000

看看现如今的浏览器战争，很难想起 Netscape 市场份额超过 86% 的那个年代。从微软发布绑定在 Windows 操作系统的 IE 浏览器开始以来，IE 一直蚕食并且主宰着浏览器市场。这张图直观地展现了浏览器发展历程。

英文原稿：Browser Evolution – The History of Web Browsers | TechKing
翻译整理：浏览器简史 | 芒果

Fuck IE！submit 事件不冒泡怎么办？

芒果 — Wed, 23 Mar 2011 09:04:10 +0000

表单提交前要加一大堆条件判断，可以直接监听 submit 事件。

但是如果该表单是由 JS 创建出来的 DOM 元素，那就出问题了：在注册事件时 DOM 是不存在的！所以需要把事件在创建 DOM 之后再注册。

当然这不是最为关键的问题。YUI3 中提供了强大的 Y.delegate 方法，支持 click、focus、blur、mouseenter、mouseleave 等多种事件类型的事件代理。

问题的关键在于 IE 不支持 submit 事件冒泡啊：http://www.quirksmode.org/dom/events/submit.html

第一个想到的方案是，改变表单提交按钮的 type=”submit” 属性为 type=“button”，代理该按钮的 click 事件。但这样一来表单无法键盘 enter 提交了。于是：

饺子哥给的方案是：在 form 标签里写死 onsubmit 属性：

doSubmitFunc();return false;">...

还是觉得怪怪的，从来没敢那么写过啊~

防范 YUI3 IO 在 IE 下的缓存

芒果 — Tue, 22 Feb 2011 06:58:02 +0000

YUI3 的 IO 模块在 IE 下默认会读取本地的异步缓存数据。

如果从某个固定 URL 的接口获取数据，IE 浏览器中，在发送第一次请求后，后续不再远程获取。要解决这个蛋疼无比的问题，首先想到改变接口 URL 的唯一性，即动态打上时间戳：

Y.io(sUrl + '?' + new Date().getTime(), cfg);

YUI3 本省貌似没有提供 no-cache 的配置项。另一种思路则是改变异步请求的 HTTP 头信息：

cfg = {
		method: 'GET',
		headers: {
			 'If-Modified-Since': '0'
		}
	};

仅此记录，仅供参考。

关于 HTTP 头的 If-Modified-Since 参数，看看这篇资料：http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.25

PHP 动态输出 X-UA-Compatible 参数

芒果 — Wed, 15 Dec 2010 16:14:23 +0000

之前谈过 X-UA-Compatible 这个 IE 兼容模式的属性，按照目前口碑的做法，直接在页面中输出 meta：

IE=Edge">

作为有代码洁癖的新一代前端，得想个办法，让他只在 IE8 以上级别的浏览器才得以出现。其实原理也很简单，做个 HTTP 头的判断就行：

IE=Edge" />
'; ?>

其实，应该通过后端语言动态输出这坨恶心的代码。

IE 表单控件的按钮聚焦问题

芒果 — Sun, 24 Oct 2010 12:55:03 +0000

按钮的写法有两种，一种是或者，如果按钮用于表单提交，还必须加上 type 属性（type=”submit”）。为了美化按钮效果，一般会设置背景和边框属性。

但在 IE 下，表单区域获得焦点的情况下，如果按钮的 type 属性被设置为 submit，该按钮会自动触发聚焦效果。如下图所示：

想要避免出现这个恶心的黑框，需要将 button 的 border 属性设置为 none，然后外面套一层容器，用来模拟按钮的边框效果。

看看这篇文章的评论框，抛弃了原先过于小的按钮样式。用户体验在于细节哈~

Spoon，绿色低碳的浏览器沙盒插件

芒果 — Thu, 23 Sep 2010 08:20:03 +0000

什么是 Spoon 插件？Spoon 是一个支持远程运行服务端应用程序的浏览器插件。安装 Spoon 插件后即可运行 Spoon 应用程序，不仅仅局限于各种浏览器、办公软件、游戏……

安装 Spoon 插件很简单，进入插件主页后点击 “Install Spoon Plugin” 按钮，几秒钟即可安装完毕，然后刷新页面即可使用。

对于前端开发人员而言，页面的调试需要用到各种形形色色的浏览器，IE/6/7/8、Firefox、Chrome、Safari、Opera，将来还有 IE9 等等等等，大量的软件会使管理变得困难，再加上多重浏览器版本，就更不可控了。

Spoon 提供了多种调试可用的浏览器版本，而且品种齐全，是您开发页面的好帮手。但一个缺憾是远程调用速度有些慢，如果在日常开发中开发机能预装一个像 Spoon 这样的服务，开发人员也可以高枕无忧了~

插件主页：http://www.spoon.net/Browsers

注意：Internet Explorer 9 不支持 WinXP 系统。

Firebug Lite，IE 下调试网页兼容性

芒果 — Wed, 30 Jun 2010 13:30:20 +0000

作为一个初出茅庐的前端开发工程师，没有私房的小工具，那纯粹是扯淡。Firebug 扩展作为最具典型的 Firefox 插件，一直被网页设计开发人员津津乐道。现在庆幸的是，Chrome 也有了自己的开发者工具栏，使得网页兼容性调试不再难。

说到 IE 浏览器下的调试工具，一般也就是 IETester，Internet Explorer Collection 等软件。IETester 官方提供了一款叫做 Debugbar 的插件，但是事实上使用手感和效果都很差强人意。

Firebug Lite 是 Firebug 团队推出的网页版 Firebug，虽然没有很强大，不过至少能解决一般性的问题。下面来看看使用方法：

1、文件调用

当然为了快速载入源代码，建议下载源代码到本地，在本地服务器运行使用。
2、一键远程调用

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

打开需要调试的页面，在浏览器地址栏输入以上代码，回车即可。

除了稳定版，官方也提供开发版和测试版。试试这个 Firebug Lite 吧，简单地捕捉 IE 下的页面兼容，还是行之有效的。

官方主页：http://getfirebug.com/firebuglite

CSS Hacks for IE，IE 也可以很完美

芒果 — Thu, 15 Apr 2010 11:17:59 +0000

掌握 CSS Hacks 可以说是前端开发工程师的一个基本技能。随着浏览器版本的遍地开花，我们寻找着尽可能使各种浏览器表现一致的 CSS 写法。当然 CSS Hacks 是最为流行的解决方案。但对于 IE 而言，目前已经有 IE6/IE7/IE8 三个主要版本，不久的将来还会有 IE9 的到来。于此，IE 是个杯具。

当然有很多人歇斯底里地诋毁 IE6，在此芒果想说的是，一切诋毁 IE6 的言论都是纸老虎。看看 IE6 的历史，它绝不是一个错误的存在。IE7/IE8 这些有严重后遗症的版本才是导致一切杯具的罪魁祸首。下面是各个 IE 版本的 CSS Hacks 写法：

IE6：

_selector{property:value;}
selector{property:value;property:value!important;} //IE6 不支持同一选择符中的 !important

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

可悲的是，IE8 会自作主张的将页面按照 IE7 模式进行渲染。目前针对 IE 多版本兼容的现状，通常会采用设置 X-UA-Compatible HTTP 头的方式开启 IE8 的兼容模式，这样能在一定程度上减少调试 IE 的工作量。代码如下：

IE=7"> //标准 IE7 模式
IE=EmulateIE7"> //兼容 IE7 模式

你也可能会碰到另一种情况：

IE=Edge">//标准 IE 模式

IE8 在没有申明 IE=Edge 的情况下还是会存在以兼容模式渲染的情况，这种设置方案 (IE=Edge) 目前口碑网正在应用。

关于 IE=Edge 详细参考：http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2008-January/013635.html

Internet Explorer Collection 免安装批处理版

芒果 — Thu, 08 Apr 2010 07:42:23 +0000

IETester 经常性的崩溃实在无法让人忍受，其实 Internet Explorer Collection 还是非常好用的，只不过每测试一个页面还需要挨个去粘贴 URL，未免过于麻烦。

这里是一个简单的批处理封装，浏览器都是从 Internet Explorer Collection 安装版中剥离出来的，选了三个 IE6/IE7/IE8 版本，如果没能满足你的需要，请自行安装提取合适版本。

提示及命令说明：

Test URL:
提示输入测试页面 URL 地址
IE Version:
提示输入 IE 浏览器版本，各版本命令如下：
all
打开所有 IE(6/7/8) 版本
6
打开 IE 6 版本
7
打开 IE 7 版本
8
打开 IE 8 版本

下载地址：Dropbox 网盘 | 来自芒果

display:inline-block 的深入理解

芒果 — Wed, 16 Sep 2009 15:08:57 +0000

在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。

display:inline-block

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

但对于这个属性不是所有浏览器都识别。

支持的浏览器有：Opera、Safari

但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性（据说下一版本的 Firefox 将会支持 display:inline-block 属性）。不过 Firefox 下却有私有属性 -moz-inline-box 和 inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，text-align 有时候就会有问题，还得改用 Firefox 的私有属性 -moz-box-align 来解决（谢谢 aoao 提供案例）。

建议：最好不要使用 Firefox 私有的 -moz-inline-box 属性。

或许有朋友会对上面所说的 IE 也不支持 display:inline-block 属性，表示疑问或者反对。说：“我在 IE 中对 a 或者 span 等内联元素使用 display:inline-block 一直是有效的”。

其实不然，在 IE 中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发 layout（如果你对 layout 感觉到陌生，可以参看 old9 翻译的《On having layout》），从而使内联元素拥有了 display:inline-block 属性的表症。从上面的这个分析，也不难理解为什么 IE 下，对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如 Opera 中块元素呈递为内联对象。

延伸一个问题：IE 下块元素如何实现 display:inline-block 的效果？

有两种方法：

1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个 display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（…为省略的其他属性内容）：

div {display:inline-block;...} div {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。代码如下：

div {display:inline; zoom:1;...}

转载自 display:inline-block 的深入理解 | 经典论坛

X-UA-Compatible，IE8 兼容模式

芒果 — Tue, 25 Aug 2009 00:18:59 +0000

浏览器市场份额的激烈竞争，给网页设计开发人员带来了兼容性设计的麻烦。单单 IE 浏览器就有好几个主流版本，IE6、IE7、IE8 等等。当然使用诸如 IETester，多版本 IE 共存解决方案之类的第三方集成工具，可以方便代码调试。但我们总需要找寻一种更为省时省力的方法。

X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。

各种兼容模式代码示例如下：

IE=5" />

像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。

IE=7" />

无论页面是否包含指令，均使用 Windows Internet Explorer 7 的标准渲染模式。

IE=8" />

开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。

IE=EmulateIE7" />

EmulateIE7 模式通知 Windows Internet Explorer 使用指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循指令。对于多数网站来说，它是首选的兼容性模式。

在现阶段，IE8 版本推向市场没有多久，份额不高。因此，考虑兼容旧版本的模式值得推荐。

参考资料：http://bbs.blueidea.com/thread-2908097-1-1.html

IETester，多版本 IE 共存解决方案

芒果 — Tue, 04 Aug 2009 03:10:08 +0000

浏览器市场割据的现象，给前端设计者造成了很大的麻烦。就目前的网页兼容性测试来看，一般需要考虑 IE6、IE7、Firefox 三种主流浏览器。至于 IE8 则可以开启 IE7 兼容模式，以减轻调试的工作量。

提及多版本 IE 的共存，有一些依靠软件绿化的方法，但总避免不了各种琐碎的问题。

这款 IETester 软件综合了 IE5.5、IE6、IE7、IE8 多种模式，彻底解决多版本 IE 共存的需求，适用于 Windows 7，Vista 以及 XP 操作系统。与以往开满浏览器窗口的调试流程相比，IETester 仅需打开一个窗口，即可预览和比较各种版本的兼容性差异。

对于前端设计者而言，IETester 是款不可多得的好软件，值得尝试使用。

注意：需要将 Windows 7，Vista 或 XP 默认浏览器升级至 IE7 版本，以保证各个版本的正常共存。

官方主页：http://www.my-debugbar.com/wiki/IETester/HomePage
下载地址：IETester v0.3.5

IE6，即将到来的末日？

芒果 — Sat, 18 Jul 2009 06:17:52 +0000

缘起国外著名科技网站 Mashable 一篇名为 IE6 Must Die for the Web to Move On 的报道，抵制 IE6 的倡议再一次被推到风口浪尖，也就有了之后的 Twitter 用户集体请愿拒绝 IE6 的事件。

浏览器市场份额局面概览

首先，在不断演进的浏览器市场上，IE、Firefox 及 Safari 三分天下已成定局。虽然 IE6 在对 Web 标准的支持方面一直被唾弃，但其市场份额并没有绝对性地下降，依然维持着 50% 以上的高度。

其次，当年 Google Adsense 疯狂的 Firefox 广告推荐很大程度上导致了 Firefox 的茁壮成长。Google Adsense 淘金热曾风靡一时，然而在 Firefox 巩固市场地位之后，即使 Google Adsense 推荐撤销，也未大幅度影响 Firefox 的份额。当然 Firefox 本身具备的强扩展性和高安全性，都为赢得份额打下了坚实的根基。

此外，苹果的 Safari 自有其独特的魅力，在大批果粉的用户下，其受欢迎程度自然较为客观。而 Chrome 则完全是出身名门而影响巨大，加上其简洁独到的设计理念，以至于颠覆了传统的浏览器。至于 Opera 则没有任何冲击力，份额少到可怜，只能用硕果仅存来形容之。

国内浏览器市场分析

首先，国内浏览器市场 IE 份额居高不下，某种层面算是 XP 后遗症。国内的 Firefox 使用者较集中于前端设计者以及少数极客。由于 Firefox 不符合国人的使用习惯，也是制约其发展的重要原因。

其次，国产 IE 内核浏览器大范围割据。常见的诸如傲游 (Maxthon)、世界之窗 (The World)、TT (Tencent Traveler) 等，其影响力毫不亚于 IE 本身。如此一来，其他品牌浏览器想要分一杯羹也就显得捉襟见肘了。

微软在 08 年推出了自动更新以升级 IE6 至 IE7 的服务，但自黑屏事件后开启自动更新的终端日趋减少。对于这样的现状，即使是微软这样的巨臂亦无能为力。

其实关于抛弃 IE6 的提议早已不是一天两天，鉴于其差劲的运行效率，最不标准的 Web 标准支持，前端设计者早已将其视为眼中钉肉中刺。国内外的网络应用情况差异太大，想要彻底摒弃 IE6 恐怕无法指日可待。IE6 的末日会在何时？仍然未知。

透明图片的 CSS Alpha 滤镜方法

芒果 — Thu, 18 Jun 2009 09:19:42 +0000

网页图片的透明效果，可以使用诸如 Photoshop、Firefox 等桌面软件处理，然而利用 CSS 的 Alpha 滤镜可以更简便地实现图片透明化。Alpha 滤镜用于把一个目标元素与背景混合，以指定数值来控制混合的程度。

CSS 滤镜并不符合 Web 标准，不过鉴于 IE 的市场份额，还是有一定的使用范围。在 IE 中透明渐变代码一般如下：

当然，样式代码也可以独立编写。滤镜可选的参数说明如下：

opacity – 透明渐变的开始透明度。
finishOpacity – 透明渐变的结束透明度。
style – 0 表示统一形状，1 表示线形，2 表示放射状，3 表示菱形。
startx/starty – 透明渐变开始坐标。
finishx/finishy – 透明渐变结束坐标。

如果是 Firefox 浏览器，只可以实现图片的透明效果，示例样式：

-moz-opacity:0.5;
opacity:0.5;

其参数取值范围为 0~1 之间。

这种透明图片的处理方法只是源于 IE 的旁门左道，在考虑多种浏览器兼容性方面，通用性差，仅供参考。

IE 浏览器条件注释详解

芒果 — Mon, 27 Apr 2009 23:38:33 +0000

使用 IE 浏览器的条件注释，能够根据浏览器版本等条件显示不同的代码块。这些注释语句只能在 HTML 代码中嵌入使用（如果要在 CSS 中判断浏览器版本并加载不同样式，可以参考芒果之前的文章：兼容不同浏览器的 CSS Hack 写法）。

1. 只允许 IE 解释执行
IE 5 之后版本加入了对条件注释的支持，所以 IE 5 以上方可使用注释。

以上代码当浏览器为 IE 时，加载样式表 style.css，当然代码可以为 CSS、HTML、JavaScript 等多种。

2. 只允许特定版本 IE 解释执行
可以通过注释，只允许 IE 5、IE 6、IE 7、IE 8 中某个版本能解释，方便与对某一版本进行独立控制。

以上代码当浏览器版本为 IE 7 时，加载 style.css 样式表。

3. 只允许非特定版本 IE 解释执行
通过注释排除 IE 5、IE 6、IE 7、IE 8 中某个版本的执行，方便与对非特定版本的 IE 进行独立控制。

以上代码当浏览器版本不是 IE 7 时，加载 style.css 样式表。

4. 只允许高于或低于特定版本 IE 解释执行
限定高于或低于某个版本的 IE 方可执行，控制的灵活性较大。

以上代码当浏览器版本高于 IE 7 时，加载 style.css 样式表。其中在代码 “IE 7]>” 中，”gt” 表示高于，如果换成 “lt”，则表示小于，相应的，”gte” 表示大于等于，”lte” 表示小于等于。

芒果小站 » IE

抛弃 CSS Hacks 后的浏览器兼容方案

推荐阅读

一个编码引发的血案

推荐阅读

IE8 中关于 colspan 属性的 bug

推荐阅读

表单中的隐藏域重置

推荐阅读

修复 IE 不显示 PNG 图片

推荐阅读

浏览器简史

推荐阅读

Fuck IE！submit 事件不冒泡怎么办？

推荐阅读

防范 YUI3 IO 在 IE 下的缓存

推荐阅读

PHP 动态输出 X-UA-Compatible 参数

推荐阅读

IE 表单控件的按钮聚焦问题

推荐阅读

Spoon，绿色低碳的浏览器沙盒插件

推荐阅读

Firebug Lite，IE 下调试网页兼容性

推荐阅读

CSS Hacks for IE，IE 也可以很完美

推荐阅读

Internet Explorer Collection 免安装批处理版

推荐阅读

display:inline-block 的深入理解

推荐阅读

X-UA-Compatible，IE8 兼容模式

推荐阅读

IETester，多版本 IE 共存解决方案

推荐阅读

IE6，即将到来的末日？

推荐阅读

透明图片的 CSS Alpha 滤镜方法

推荐阅读

IE 浏览器条件注释详解

推荐阅读