ie.md

   1 ---
   2 title: Internet Explorer
   3 category: HTML
   4 layout: 2017/sheet
   5 updated: 2018-03-06
   6 ---
   7
   8 ## Support table
   9 {: .-one-column}
  10
  11 ### CSS Selectors
  12
  13 | Feature                                                    | IE6 | IE7 | IE8 | IE9 | IE10 |
  14 | ---------------------------------------------------------- | -   | -   | -   | -   | --   |
  15 | `>` _(descendant)_                                         |     | 7 ✓ | ✓   | ✓   | ✓    |
  16 | `[attr]` _(attribute)_                                     |     | 7 ✓ | ✓   | ✓   | ✓    |
  17 | `.class1.class2` _(multiple classes)_                      |     | 7 ✓ | ✓   | ✓   | ✓    |
  18 | `~` _(sibling)_                                            |     | 7 ✓ | ✓   | ✓   | ✓    |
  19 | `+` _(adjacent)_                                           |     | 7 ✓ | ✓   | ✓   | ✓    |
  20 | ---------------------------------------------------------- | -   | -   | -   | -   | --   |
  21 | `:first-child` <sup>\*</sup>                               |     |     | 8 ✓ | ✓   | ✓    |
  22 | `:focus`                                                   |     |     | 8 ✓ | ✓   | ✓    |
  23 | `:before` `:after` _(single colon only)_                   |     |     | 8 ✓ | ✓   | ✓    |
  24 | `:lang`                                                    |     |     | 8 ✓ | ✓   | ✓    |
  25 | ---------------------------------------------------------- | -   | -   | -   | -   | --   |
  26 | `:first-of-type`, `:last-of-type`                          |     |     |     | 9 ✓ | ✓    |
  27 | `:last-child`                                              |     |     |     | 9 ✓ | ✓    |
  28 | `:empty`                                                   |     |     |     | 9 ✓ | ✓    |
  29 | `:enabled` `:disabled` `:checked`                          |     |     |     | 9 ✓ | ✓    |
  30 | `:not()`                                                   |     |     |     | 9 ✓ | ✓    |
  31 | `:nth-child()` `:nth-last-child()`                         |     |     |     | 9 ✓ | ✓    |
  32 | `:nth-of-type()` `:nth-last-of-type()` `:only-of-type()`   |     |     |     | 9 ✓ | ✓    |
  33 | `:only-child()`                                            |     |     |     | 9 ✓ | ✓    |
  34 | `:target`                                                  |     |     |     | 9 ✓ | ✓    |
  35 | `::selection`                                              |     |     |     | 9 ✓ | ✓    |
  36 | `:root`                                                    |     |     |     | 9 ✓ | ✓    |
  37 {: .-headers.-no-wrap}
  38
  39 `first-child:` doesn't work for elements inserted via JS.
  40
  41 ### CSS properties
  42
  43 | Feature                                                    | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 |
  44 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  45 | `max-width`                                                |     | 7 ✓ | ✓   | ✓   | ✓    | ✓    |
  46 | `position: fixed`                                          |     | 7 ✓ | ✓   | ✓   | ✓    | ✓    |
  47 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  48 | `outline`                                                  |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  49 | `display: inline-block` <sup>\*</sup>                      |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  50 | `display: table`                                           |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  51 | `border-collapse`, `border-spacing`, `table-layout`, ...   |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  52 | `whitespace: pre-wrap`                                     |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  53 | `whitespace: pre-line`                                     |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  54 | `box-sizing`                                               |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  55 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  56 | `background-clip`                                          |     |     |     | 9 ✓ | ✓    | ✓    |
  57 | `background-origin`                                        |     |     |     | 9 ✓ | ✓    | ✓    |
  58 | `background-size`                                          |     |     |     | 9 ✓ | ✓    | ✓    |
  59 | `background: x, y, z` _(multiple backgrounds)_             |     |     |     | 9 ✓ | ✓    | ✓    |
  60 | `opacity`                                                  |     |     |     | 9 ✓ | ✓    | ✓    |
  61 | `border-radius`                                            |     |     |     | 9 ✓ | ✓    | ✓    |
  62 | `box-shadow`                                               |     |     |     | 9 ✓ | ✓    | ✓    |
  63 | `rgba()`                                                   |     |     |     | 9 ✓ | ✓    | ✓    |
  64 | `transform`                                                |     |     |     | 9 ✓ | ✓    | ✓    |
  65 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  66 | `animation`                                                |     |     |     |     | 10 ✓ | ✓    |
  67 | `transition`                                               |     |     |     |     | 10 ✓ | ✓    |
  68 | `linear-gradient()`                                        |     |     |     |     | 10 ✓ | ✓    |
  69 | `text-shadow` — [polyfill][text-shadow]                    |     |     |     |     | 10 ✓ | ✓    |
  70 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  71 | `border-image`                                             |     |     |     |     |      | 11 ✓ |
  72 {: .-headers.-no-wrap}
  73
  74 `inline-block:` IE6/7 can only support inline-block for elements that are naturally inline, like span
  75
  76 ### Features
  77
  78 | Feature                                                    | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 |
  79 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  80 | PNG alpha transparency                                     |     | 7 ✓ | ✓   | ✓   | ✓    | ✓    |
  81 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  82 | data URI [⊙][datauri]                                      |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  83 | JS: JSON parsing [⊙][json]                                 |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  84 | JS: Cross-origin resource sharing [⊙][cors]                |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  85 | JS: Local storage [⊙][localstorage]                        |     |     | 8 ✓ | ✓   | ✓    | ✓    |
  86 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  87 | CSS: `@media` queries — [polyfill][respond]                |     |     |     | 9 ✓ | ✓    | ✓    |
  88 | HTML: new HTML5 elements - [polyfill][html5shiv]           |     |     |     | 9 ✓ | ✓    | ✓    |
  89 | HTML: `<canvas>`                                           |     |     |     | 9 ✓ | ✓    | ✓    |
  90 | HTML: `<svg>`                                              |     |     |     | 9 ✓ | ✓    | ✓    |
  91 | HTML: `<img src='image.svg'>`                              |     |     |     | 9 ✓ | ✓    | ✓    |
  92 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  93 | CSS: flexbox [⊙][flexbox] <sup>\*</sup>                    |     |     |     |     | 10 ✓ | ✓    |
  94 | HTML: `<input placeholder='..'>` [⊙][placeholder]          |     |     |     |     | 10 ✓ | ✓    |
  95 | HTML: `<input type='range'>`                               |     |     |     |     | 10 ✓ | ✓    |
  96 | HTML: `<input required>` [⊙][validation]                   |     |     |     |     | 10 ✓ | ✓    |
  97 | JS: Web sockets                                            |     |     |     |     | 10 ✓ | ✓    |
  98 | ---------------------------------------------------------- | -   | -   | -   | -   | --   | --   |
  99 | JS: Fullscreen mode                                        |     |     |     |     |      | 11 ✓ |
 100 {: .-headers.-no-wrap}
 101
 102 `flexbox:` IE10 only supports the 2012 syntax with -ms- prefix.
 103
 104 ## Polyfills
 105
 106 ### IE polyfills
 107
 108 Always install these in almost every project:
 109
 110  - [json2] for JSON parsing (for IE7 below)
 111  - [selectivizr] for selectors (for IE8 below)
 112  - [html5shiv] for new HTML tags (for IE8 below)
 113  - [respond] for media queries (for IE8 below)
 114  - See [this article](http://ricostacruz.com/til/ie-polyfills.html) for info
 115
 116 ```html
 117 <!--[if lt IE 9]>
 118 <script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script>
 119 <script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js'>
 120 <script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>
 121 <script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'>
 122 <script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'>
 123 <![endif]-->
 124 ```
 125
 126 ### You may also need
 127
 128  - [modernizr] for feature detection
 129
 130 ### for CSS3 decorations
 131
 132  - [css3pie]
 133  - [cssSandpaper]
 134  - [ecsstender]
 135
 136 See: [Cross-browser polyfills list][fills]
 137
 138 Misc
 139 ----
 140
 141 ### IE Conditional comment HTML
 142
 143 ```html
 144 <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
 145 <!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
 146 <!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
 147 <!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
 148 <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
 149 ```
 150
 151 ### IE conditionals
 152
 153 ```html
 154 <!--[if IE]>      I'm IE      <![endif]-->
 155 <!--[if !IE]> --> Not IE <!-- <![endif]-->
 156 ```
 157
 158 [text-shadow]: https://github.com/heygrady/textshadow
 159 [ie7.js]: http://ie7-js.googlecode.com/svn/test/index.html
 160 [selectivizr]: http://selectivizr.com/
 161 [css3pie]: http://css3pie.com/
 162 [cssSandpaper]: https://github.com/zoltan-dulac/cssSandpaper
 163 [html5shiv]: https://code.google.com/p/html5shiv/
 164 [fills]: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
 165 [json2]: https://github.com/douglascrockford/JSON-js
 166 [modernizr]: https://modernizr.com
 167 [ecsstender]: http://ecsstender.org/
 168 [respond]: https://github.com/scottjehl/Respond
 169 [flexbox]: https://caniuse.com/#feat=flexbox
 170 [cors]: https://caniuse.com/#feat=cors
 171 [localstorage]: https://caniuse.com/#feat=localstorage
 172 [json]: https://caniuse.com/#feat=json
 173 [datauri]: https://caniuse.com/#feat=datauri
 174 [validation]: https://caniuse.com/#search=validation
 175 [placeholder]: https://caniuse.com/#feat=input-placeholder