Internet Explorer cheatsheet

Support table

CSS Selectors

Feature	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 ✓	✓

first-child: doesn’t work for elements inserted via JS.

CSS properties

Feature	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 ✓

inline-block: IE6/7 can only support inline-block for elements that are naturally inline, like span

Features

Feature	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 ✓

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='//cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js'>
<script src='//cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js'>
<script src='//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]-->