---
title: Internet Explorer
category: HTML
---

## CSS Selectors

| Feature                                                    | IE6 | 7   | 8   | 9   | 10 |
| ---------------------------------------------------------- | -   | -   | -   | -   | -- |
| `>` _(descendant)_                                         |     | 7 ✓ | ✓   | ✓   | ✓  |
| `[attr]` _(attribute)_                                     |     | 7 ✓ | ✓   | ✓   | ✓  |
| `.class1.class2` _(multiple classes)_                      |     | 7 ✓ | ✓   | ✓   | ✓  |
| `~` _(sibling)_                                            |     | 7 ✓ | ✓   | ✓   | ✓  |
| `+` _(adjacent)_                                           |     | 7 ✓ | ✓   | ✓   | ✓  |
| ---------------------------------------------------------- | -   | -   | -   | -   | -- |
| `:first-child` <sup>1</sup>                                |     |     | 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 ✓ | ✓  |
{:.wide.greycode.ie}

## CSS properties

| Feature                                                    | IE6 | 7   | 8   | 9   | 10   | 11   |
| ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
| `max-width`                                                |     | 7 ✓ | ✓   | ✓   | ✓    | ✓    |
| `position: fixed`                                          |     | 7 ✓ | ✓   | ✓   | ✓    | ✓    |
| ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
| `outline`                                                  |     |     | 8 ✓ | ✓   | ✓    | ✓    |
| `display: inline-block` <sup>2</sup>                       |     |     | 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][text-shadow]                    |     |     |     |     | 10 ✓ | ✓    |
| ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
| `border-image`                                             |     |     |     |     |      | 11 ✓ |
{:.wide.greycode.ie}

## Features

| Feature                                                    | IE6 | 7   | 8   | 9   | 10   | 11   |
| ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
| PNG alpha transparency                                     |     | 7 ✓ | ✓   | ✓   | ✓    | ✓    |
| ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
| data URI [⊙][datauri]                                      |     |     | 8 ✓ | ✓   | ✓    | ✓    |
| JS: JSON parsing [⊙][json]                                 |     |     | 8 ✓ | ✓   | ✓    | ✓    |
| JS: Cross-origin resource sharing [⊙][cors]                |     |     | 8 ✓ | ✓   | ✓    | ✓    |
| JS: Local storage [⊙][localstorage]                        |     |     | 8 ✓ | ✓   | ✓    | ✓    |
| ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
| CSS: `@media` queries — [polyfill][respond]                |     |     |     | 9 ✓ | ✓    | ✓    |
| HTML: new HTML5 elements - [polyfill][html5shiv]           |     |     |     | 9 ✓ | ✓    | ✓    |
| HTML: `<canvas>`                                           |     |     |     | 9 ✓ | ✓    | ✓    |
| HTML: `<svg>`                                              |     |     |     | 9 ✓ | ✓    | ✓    |
| HTML: `<img src='image.svg'>`                              |     |     |     | 9 ✓ | ✓    | ✓    |
| ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
| CSS: flexbox [⊙][flexbox] <sup>3</sup>                     |     |     |     |     | 10 ✓ | ✓    |
| HTML: `<input placeholder='..'>` [⊙][placeholder]          |     |     |     |     | 10 ✓ | ✓    |
| HTML: `<input type='range'>`                               |     |     |     |     | 10 ✓ | ✓    |
| HTML: `<input required>` [⊙][validation]                   |     |     |     |     | 10 ✓ | ✓    |
| JS: Web sockets                                            |     |     |     |     | 10 ✓ | ✓    |
| ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
| JS: Fullscreen mode                                        |     |     |     |     |      | 11 ✓ |
{:.wide.greycode.ie}

<style>
table.ie {table-layout:fixed;}
table.ie tr>:not(:first-child) {text-align:right;width: 50px;padding-left:0;}
table.ie tr>td:not(:first-child) {color: green;font-size:0.9em;}
</style>

## 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](http://ricostacruz.com/til/ie-polyfills.html) for info

```nohighlight
<!--[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

 - [css3pie]
 - [cssSandpaper]
 - [ecsstender]

Also see:

 - [Cross-browser polyfills list][fills]

Misc
----

### IE Conditional comment HTML

```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

```html
<!--[if IE]>      I'm IE      <![endif]-->
<!--[if !IE]> --> Not IE <!-- <![endif]-->
```

Footnotes
---------

 * (1) = first-child: doesn't work for elements inserted via JS
 * (2) = inline-block: IE6/7 can only support inline-block for elements that are naturally inline, like span
 * (3) = CSS flexbox: IE10 only supports the 2012 syntax with `-ms-` prefix

[text-shadow]: https://github.com/heygrady/textshadow
[ie7.js]: http://ie7-js.googlecode.com/svn/test/index.html
[selectivizr]: http://selectivizr.com/
[css3pie]: http://css3pie.com/
[cssSandpaper]: https://github.com/zoltan-dulac/cssSandpaper
[html5shiv]: https://code.google.com/p/html5shiv/
[fills]: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
[json2]: https://github.com/douglascrockford/JSON-js
[modernizr]: https://modernizr.com
[ecsstender]: http://ecsstender.org/
[respond]: https://github.com/scottjehl/Respond
[flexbox]: http://caniuse.com/#feat=flexbox
[cors]: http://caniuse.com/#feat=cors
[localstorage]: http://caniuse.com/#feat=localstorage
[json]: http://caniuse.com/#feat=json
[datauri]: http://caniuse.com/#feat=datauri
[validation]: http://caniuse.com/#search=validation
[placeholder]: http://caniuse.com/#feat=input-placeholder