ie - dcsan/godocs GitHub Wiki

title: Internet Explorer layout: default

CSS Selectors

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

Features

Feature IE6 7 8 9 10 11
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 ⊙ 3 10 ✓ ✓
HTML: <input placeholder='..'> ⊙ 10 ✓ ✓
HTML: <input type='range'> 10 ✓ ✓
HTML: <input required> ⊙ 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

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

for CSS3 decorations

Also see:

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

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
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️