本文根据 Devhints / Internet Explorer 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2018-03-06。
支持情况表
CSS 选择器
| 功能 | IE6 | IE7 | IE8 | IE9 | IE10 |
|---|---|---|---|---|---|
> （后代） | 7 ✓ | ✓ | ✓ | ✓ | |
[attr] （属性） | 7 ✓ | ✓ | ✓ | ✓ | |
.class1.class2 （多个类） | 7 ✓ | ✓ | ✓ | ✓ | |
~ （同级） | 7 ✓ | ✓ | ✓ | ✓ | |
+ （相邻） | 7 ✓ | ✓ | ✓ | ✓ | |
:first-child * | 8 ✓ | ✓ | ✓ | ||
:focus | 8 ✓ | ✓ | ✓ | ||
:before :after （仅限单冒号） | 8 ✓ | ✓ | ✓ | ||
:lang | 8 ✓ | ✓ | ✓ | ||
:first-of-type, :last-of-type | 9 ✓ | ✓ | |||
:last-child | 9 ✓ | ✓ | |||
:empty | 9 ✓ | ✓ | |||
:enabled :disabled :checked | 9 ✓ | ✓ | |||
:not() | 9 ✓ | ✓ | |||
:nth-child() :nth-last-child() | 9 ✓ | ✓ | |||
:nth-of-type() :nth-last-of-type() :only-of-type() | 9 ✓ | ✓ | |||
:only-child() | 9 ✓ | ✓ | |||
:target | 9 ✓ | ✓ | |||
::selection | 9 ✓ | ✓ | |||
:root | 9 ✓ | ✓ |
first-child: 对于通过 JS 插入的元素无效。
CSS 属性
| 功能 | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 |
|---|---|---|---|---|---|---|
max-width | 7 ✓ | ✓ | ✓ | ✓ | ✓ | |
position: fixed | 7 ✓ | ✓ | ✓ | ✓ | ✓ | |
outline | 8 ✓ | ✓ | ✓ | ✓ | ||
display: inline-block * | 8 ✓ | ✓ | ✓ | ✓ | ||
display: table | 8 ✓ | ✓ | ✓ | ✓ | ||
border-collapse, border-spacing, table-layout, … | 8 ✓ | ✓ | ✓ | ✓ | ||
whitespace: pre-wrap | 8 ✓ | ✓ | ✓ | ✓ | ||
whitespace: pre-line | 8 ✓ | ✓ | ✓ | ✓ | ||
box-sizing | 8 ✓ | ✓ | ✓ | ✓ | ||
background-clip | 9 ✓ | ✓ | ✓ | |||
background-origin | 9 ✓ | ✓ | ✓ | |||
background-size | 9 ✓ | ✓ | ✓ | |||
background: x, y, z （多重背景） | 9 ✓ | ✓ | ✓ | |||
opacity | 9 ✓ | ✓ | ✓ | |||
border-radius | 9 ✓ | ✓ | ✓ | |||
box-shadow | 9 ✓ | ✓ | ✓ | |||
rgba() | 9 ✓ | ✓ | ✓ | |||
transform | 9 ✓ | ✓ | ✓ | |||
animation | 10 ✓ | ✓ | ||||
transition | 10 ✓ | ✓ | ||||
linear-gradient() | 10 ✓ | ✓ | ||||
text-shadow — Polyfill（垫片/兼容性补丁） | 10 ✓ | ✓ | ||||
border-image | 11 ✓ |
inline-block: IE6/7 仅支持元素的 `inline-block` 布局天生属于行内（inline）元素，例如 `span`
特性
| 功能 | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 |
|---|---|---|---|---|---|---|
| PNG Alpha 透明度 | 7 ✓ | ✓ | ✓ | ✓ | ✓ | |
| 数据 URI ⊙ | 8 ✓ | ✓ | ✓ | ✓ | ||
| JS：JSON 解析 ⊙ | 8 ✓ | ✓ | ✓ | ✓ | ||
| JS：跨域资源共享（CORS） ⊙ | 8 ✓ | ✓ | ✓ | ✓ | ||
| JS：本地存储（Local Storage） ⊙ | 8 ✓ | ✓ | ✓ | ✓ | ||
CSS: @media 查询 —— Polyfill（垫片/兼容性补丁） | 9 ✓ | ✓ | ✓ | |||
| HTML：新的 HTML5 元素 - Polyfill（垫片/兼容性补丁） | 9 ✓ | ✓ | ✓ | |||
HTML: <canvas> | 9 ✓ | ✓ | ✓ | |||
HTML: <svg> | 9 ✓ | ✓ | ✓ | |||
HTML: <img src='image.svg'> | 9 ✓ | ✓ | ✓ | |||
| CSS：弹性盒子布局（Flexbox） ⊙ * | 10 ✓ | ✓ | ||||
HTML: <input placeholder='..'> ⊙ | 10 ✓ | ✓ | ||||
HTML: <input type='range'> | 10 ✓ | ✓ | ||||
HTML: <input required> ⊙ | 10 ✓ | ✓ | ||||
| JS：WebSockets | 10 ✓ | ✓ | ||||
| JS：全屏模式 | 11 ✓ |
flexbox: IE10 仅支持带有 `-ms-` 前缀的 2012 版语法。
Polyfill（兼容性补丁）
IE Polyfill
几乎在每个项目中都应安装以下内容：
- json2 用于 JSON 解析（对应下文的 IE7）
- selectivizr 用于选择器（对应下文的 IE8）
- html5shiv 用于新的 HTML 标签（对应下文的 IE8）
- respond 用于媒体查询（对应下文的 IE8）
- 参见 本文 获取更多信息
<!--[if lt IE 9]>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js'>
<script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'>
<![endif]-->您可能还需要
- modernizr 用于特性检测
用于 CSS3 装饰效果
杂项
IE 条件注释 HTML
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->IE 条件注释
<!--[if IE]> I'm IE <![endif]-->
<!--[if !IE]> --> Not IE <!-- <![endif]-->