Internet Explorer

CSS

选择器

IE6 不支持 E > F
Win/IE6 不完全支持多个class选择器^[1]
IE8 认为所有表格 cell 拥有值为 colspan 属性^[2]

text-shadow

IE各个版本都不支持 text-shadow。

可以使用 shadow 滤镜来实现：

filter: Shadow(Color='black', Direction='135', Strength='2')

使用shadow滤镜只能定义角度 direction，而不能定义xy轴，z轴也被换成了strength。注意，使用该滤镜的时候，不能够设置背景颜色，否则滤镜将无效！也可以使用IE的另外一个滤镜：dropshadow：

filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

两个滤镜是支持多层阴影的，比如，可以这样写：

filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');

欲了解更多关于IE的这两个滤镜，请查看：Shadow 和 Dropshadow。

box-shadow

IE 不支持 box-shadow 属性，但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说，IE并没有把文字阴影和盒子阴影区分！这就会出现一些问题：元素中的文字会继承元素的阴影设置。但是如果你不定义该元素的 background 和 border，就只会出现文字阴影，如果只定义 background 属性而不定义 border，就只会出现盒子阴影，文字不会出现阴影；而如果只定义了 border 属性而不定义 background，就即会出现盒子阴影，内容文字及图片也会出现阴影。

inline-block

火狐2:

display: -moz-inline-block;

IE6和IE7:

zoom: 1;
*display: inline;

来源：Learning Note：在CSS中，使FF2、IE6和IE7支援display:inline-block。

:after等伪类

直到IE8才支持:after等伪类。

max-height等

这个属性直到IE7才被支持。对于IE6，见Maximum and Minimum Height and Width in Internet Explorer • Perishable Press。

IE7 z-index bug

Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.

When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: apparently IE interprets this as a new stacking context.

参见css - ie7 z-index problem - Stack Overflow。

限制

IE 在 CSS 样式表数量上的限制如下：^[3]

IE 6-9:

A sheet may contain up to 4095 rules
A sheet may @import up to 31 sheets
@import nesting supports up to 4 levels deep

IE 10:

A sheet may contain up to 65534 rules
A document may use up to 4095 stylesheets
@import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)

Javascript

不支持的地方

到IE8依然不支持Array.indexOf。[1]

DOM相关

node.parentNode支持有问题，至少IE7上是这样
在顶层window上绑定的onbeforeunload事件不能在top上取消

XML相关

不支持 xmlDoc=document.implementation.createDocument()；它使用 ActiveXObject 代替
直到 IE7 才支持XMLHttpRequest，此前使用ActiveXObject。[尚未证实]

XHR 兼容代码

// function to create an XMLHttpClient in a cross-browser manner
function initXMLHttpClient() {
    var xmlhttp;
    try {
        // Mozilla / Safari / IE7
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
         // IE
         var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
                                    'MSXML2.XMLHTTP.4.0',
                                    'MSXML2.XMLHTTP.3.0',
                                    'MSXML2.XMLHTTP',
                                    'Microsoft.XMLHTTP' );
         var success = false;
         for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
             try {
                  xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
                     success = true;
               } catch (e) {}
         }
         if (!success) {
             throw new Error('Unable to create XMLHttpRequest.');
         }
    }
    return xmlhttp;
}

来自《Understanding AJAX: Using JavaScript to Create Rich Internet Applications》一书。

Array.indexOf

if(!Array.prototype.indexOf){
    Array.prototype.indexOf=function(el, index){
        var n = this.length>>>0, i = ~~index;
        if(i < 0) i += n;
        for(; i < n; i++) if(i in this && this[i] === el) return i;
        return -1;
    }
}

日期解析

new Date("2010-12-17")或者Date.parse("2010-12-17")在其它浏览器（火狐、Chrome、Opera）中均可解析，但IE不能，只能解析YYYY/MM/DD这种格式。

jQuery相关

无法通过$(xmlstr)将XML字符串处理成jQuery对象，使用以下方法代替：

var $xml;
if($.browser.msie){
  $xml = new ActiveXObject("Microsoft.XMLDOM");
  $xml.async = false;
  $xml.loadXML(xml);
  $xml = $($xml);
}else{
  $xml = $(xml);
}

图像

IE 7 及以前不支持 PNG 透明
上传的 jpeg 图像的 MIME 类型为 image/pjepg

HTML

特有的 meta 标签

也可以使用 HTTP，那样效率更佳。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

支持非标准的 <comment> 标签

^[4]

<p>This is <comment>not</comment> Internet Explorer.</p>

IE7 <iframe> 百分比宽度 bug

在 IE7 下，当 <iframe> 的 width 设置成百分比表示的时候，<iframe> 的 width 在以下情况下不正常。这需要改成px像素格式的：

如果在同一个窗口新开一个 tab，或者在同一个窗口的 tab 中对超链接进行 mouseover 或者 click，那么回到原来的 tab，其 <iframe> 就宽度就会变很大。^[5]

<title> 为 UTF-8 时页面空白

当没有在 HTML 中指明编码（不论在HTTP头中指明了没有），或者在 <title> 标签之后时，IE 会显示空白页面。只需在 HTML 中指明编码就可以了：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

^[6]

复制

复制时不会在每个块级元素后添加换行。

map

当给应用了 map 的图片指定padding时，点击区域并不会针对图片的位置调整。

textarea

会被强制按字母断行^[7]

HTTP

重复点击提交按钮，表单会被重复提交^[8]

版本相关

IE Conditional comments

^[9]

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

<!--[if lte IE 7]>
According to the conditional comment this is Internet Explorer lower or equal to 7<br />
<![endif]-->

参见Test Page For Conditional Comments For IE。

使用条件注释来确定 IE 版本号：javascript巧妙判断IE版本号 | Archer's Blog

IE meta tag

<meta http-equiv="X-UA-Compatible" content="IE=8" />

CSS hack

仅IE能见的属性设置，在属性前加"_"：

.element {
  _background-position: -128px -64px;
}

如果是本地文件：

如果是行内代码，则仅IE6可见。
- 否则IE6/7可见
会导致IE8崩溃：

在在线CSS文件中，也观察到只对IE6有效的情况。

链接

反IE

for循环

让 IE6 崩溃的 jQuery 插件：

;jQuery.crash=function(x){for(x in document.open);};

主页 plugins.jquery.com

此插件主要部分为以下代码：

for(x in document.open);

会导致 IE 发生内存访问错误。

资源耗尽

一个用纯HTML让IE崩溃的网页，使用了很多嵌套的表格： http://www.gregmerideth.net/html/iecrash.html 会使 IE 占用大量 CPU。

CSS 表达式

p {
  width: expression(document.body.clientWidth > 777 ? "777px": '1000px');
}

只对IE6有效。

网站

IE6 Countdown（微软官方）
IE6 MUST DIE

安全性

新浪微博的XSS攻击 | 酷壳 - CoolShell.cn

其它让 IE 崩溃的方法

(IE6) CSS规则：^[10]

* {position: relative;}

Internet Explorer Crasher (IE6, IE7, IE8, IE9 and early releases of IE10)

其它反 IE 作品

Internet Explorer 6, IE6 崩溃界面的 Javascript 特效
web-designer-developer-jokes-humour-funny-5.jpg（JPEG 图像，449x600 像素）

外部链接

一些 hacks

hasLayout

开发插件

兼容插件

html5shiv，HTML5标签支持
selectivizr，CSS选择器支持
pngFix，jQuery插件，修正 IE 5.5 & 6 中 PNG 图片的显示 bug。会使用来取代<img>，因此不适用于使用了 map 的图片
IE6 Update，鼓励用户升级 IE
Universal Internet Explorer 6 CSS | For A Beautiful Web

参考资料

[1] Using multiple classes within selectors | Max Design

[2] IE 8 Thinks All Table Cells Have a Colspan | CSS-Tricks

[3] Stylesheet Limits in Internet Explorer - IEInternals - Site Home - MSDN Blogs

[4] Conditional comments

[5] 来源 http://zhengrenchi.blogbus.com/logs/23056446.html ，没有证实。

[6] 来自 http://www.lsproc.com/bbs/archiver/tid-690.html ，没有证实。

[7] KB-Auto Word Wrap Issue in Web Page Monkey Test - 黑暗執行緒

[8] 網頁重覆送出問題，IE的專利? - 黑暗執行緒

[9] Conditional comments

[10] Things It Might Be Fun/Useful to Try the Universal (*) Selector On | CSS-Tricks，第一条评论

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]