Back to Cheatsheets
Internet Explorer
HTML2018-03-06
Support table
{: .-one-column}
CSS Selectors
| Feature | IE6 | IE7 | IE8 | IE9 | IE10 |
|---|---|---|---|---|---|
> (descendant) | 7 ✓ | ✓ | ✓ | ✓ | |
[attr] (attribute) | 7 ✓ | ✓ | ✓ | ✓ | |
.class1.class2 (multiple classes) | 7 ✓ | ✓ | ✓ | ✓ | |
~ (sibling) | 7 ✓ | ✓ | ✓ | ✓ | |
+ (adjacent) | 7 ✓ | ✓ | ✓ | ✓ | |
| ---------------------------------------------------------- | - | - | - | - | -- |
:first-child * | 8 ✓ | ✓ | ✓ | ||
:focus | 8 ✓ | ✓ | ✓ | ||
:before :after (single colon only) | 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 ✓ | ✓ | |||
| {: .-headers.-no-wrap} |
first-child: doesn't work for elements inserted via JS.
CSS properties
| Feature | 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 (multiple backgrounds) | 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 ✓ | |||||
| {: .-headers.-no-wrap} |
inline-block: IE6/7 can only support inline-block for elements that are naturally inline, like span
Features
| Feature | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 |
|---|---|---|---|---|---|---|
| PNG alpha transparency | 7 ✓ | ✓ | ✓ | ✓ | ✓ | |
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
| data URI ⊙ | 8 ✓ | ✓ | ✓ | ✓ | ||
| JS: JSON parsing ⊙ | 8 ✓ | ✓ | ✓ | ✓ | ||
| JS: Cross-origin resource sharing ⊙ | 8 ✓ | ✓ | ✓ | ✓ | ||
| JS: Local storage ⊙ | 8 ✓ | ✓ | ✓ | ✓ | ||
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
CSS: @media queries — polyfill | 9 ✓ | ✓ | ✓ | |||
| HTML: new HTML5 elements - 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: Web sockets | 10 ✓ | ✓ | ||||
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
| JS: Fullscreen mode | 11 ✓ | |||||
| {: .-headers.-no-wrap} |
flexbox: IE10 only supports the 2012 syntax with -ms- prefix.
Polyfills
IE polyfills
Always install these in almost every project:
- json2 for JSON parsing (for IE7 below)
- selectivizr for selectors (for IE8 below)
- html5shiv for new HTML tags (for IE8 below)
- respond for media queries (for IE8 below)
- See this article for info
<!--[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]-->
You may also need
- modernizr for feature detection
for CSS3 decorations
See: Cross-browser polyfills list
Misc
IE Conditional comment 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 conditionals
<!--[if IE]> I'm IE <![endif]-->
<!--[if !IE]> --> Not IE <!-- <![endif]-->