HTML and CSS Technical Articles
CSS Compatibility and Internet Explorer

With each new release of Windows Internet Explorer, support for the Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS, Level 1-compliant version of Internet Explorer. Windows Internet Explorer 8 is fully compliant with the CSS, Level 2 Revision 1 (CSS 2.1) specification and supports some features of CSS Level 3 (CSS 3).

If your Web site targets browsers that include earlier versions of Internet Explorer, you want to know the level of CSS compliance for those versions. This article provides an at-a-glance look at CSS compliance across recent versions of Internet Explorer, including support in Internet Explorer 8.

Note  CSS features that are new to Internet Explorer 8 will only work when your page is rendered in IE8 mode (or higher). You can ensure your page displays in IE8 mode by including the following meta tag in your page's head section: 

<meta http-equiv="X-UA-Compatible" content="IE=8" />

For more information on document compatibility modes, see Defining Document Compatibility.

This article's organization is loosely based on that of the CSS reference documentation on MSDN. It contains the following sections:

Introduction

Each table lists support status information for grouped CSS features across recent versions of Internet Explorer. In each section, the first table represents features introduced in CSS 2.1 or earlier, and the second table represents features planned (by the World Wide Web Consortium (W3C)) for CSS 3.

A value of "Yes" in a cell indicates that that feature is implemented in that version of Internet Explorer.

A value of "Partial" in a cell indicates that that feature is only partially implemented in that version of Internet Explorer. For more information, click the link to view that feature's reference page on MSDN.

A value of "No" in a cell indicates that that feature is not implemented in that version of Internet Explorer.

At-rules

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
@charsetNoYesYesYesYes
@importYesYesYesYesYes
@mediaNoYesYesYesYes
@pagePartialPartialPartialPartialYes

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
@font-faceNoYesYesYesYes
@namespace No No No No No

Selectors

Element Selectors

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
.value { sRules } Class (see Note)PartialPartialPartialYesYes
#value { sRules } IDYesYesYesYesYes
E { sRules } TypeYesYesYesYesYes
* { sRules } UniversalNoNoNoYesYes

Note   Prior to Internet Explorer 7, there was a two-class selector limit per element.


CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
ns|E { sRules }NamespacedNoNoNoNoNo

Attribute Selectors

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
[att=val] { sRules }Equality [=]NoNoNoYesYes
[att] { sRules }Existence []NoNoNoYesYes
[att|=val] { sRules }Hyphen [|=]NoNoNoYesYes
[att~=val] { sRules }Whitespace [~=]NoNoNoYesYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
[ns|attr] { sRules }NamespacedNoNoNoYesYes
[att^=val] { sRules }Prefix [^=]NoNoNoYesYes
[att*=val] { sRules }Substring [*=]NoNoNoYesYes
[att$=val] { sRules }Suffix [$=]NoNoNoYesYes

Combinators

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
E + F { sRules }Adjacent Sibling (+)NoNoNoYesYes
E > F { sRules }Child (>)NoNoNoYesYes
E F { sRules }DescendantYesYesYesYesYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
E ~ F { sRules }General Sibling (~)NoNoNoYesYes

Pseudo-classes

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
:active { sRules }:activeNoNoNoPartialYes
:first-child { sRules }:first-childNoNoNoYesYes
:focus { sRules }:focusNoNoNoNoYes
:hover { sRules }:hoverPartialPartialPartialYesYes
:lang(C) { sRules } :lang()NoNoNoNoYes
:link { sRules }:linkYesYesYesYesYes
:visited { sRules }:visitedYesYesYesYesYes
@page :first { sRules }@page :firstNoNoNoNoYes
@page :left { sRules }@page :leftNoNoNoNoYes
@page :right { sRules }@page :rightNoNoNoNoYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
:root { sRules }:rootNoNoNoNoNo
:nth-child() { sRules }:nth-child()NoNoNoNoNo
:nth-last-child() { sRules }:nth-last-child()NoNoNoNoNo
:nth-of-type() { sRules }:nth-of-type()NoNoNoNoNo
:nth-last-of-type() { sRules }:nth-last-of-type()NoNoNoNoNo
:last-child { sRules }:last-childNoNoNoNoNo
:first-of-type { sRules }:first-of-typeNoNoNoNoNo
:last-of-type { sRules }:last-of-typeNoNoNoNoNo
:only-child { sRules }:only-childNoNoNoNoNo
:only-of-type { sRules }:only-of-typeNoNoNoNoNo
:empty { sRules }:emptyNoNoNoNoNo
:target { sRules }:targetNoNoNoNoNo
:not(X) { sRules }:not()NoNoNoNoNo
:enabled { sRules }:enabledNoNoNoNoNo
:disabled { sRules }:disabledNoNoNoNoNo
:checked { sRules }:checkedNoNoNoNoNo
:indeterminate { sRules }:indeterminateNoNoNoNoNo
:default { sRules }:defaultNoNoNoNoNo
:valid { sRules }:validNoNoNoNoNo
:invalid { sRules }:invalidNoNoNoNoNo
:in-range { sRules }:in-rangeNoNoNoNoNo
:out-of-range { sRules }:out-of-rangeNoNoNoNoNo
:required { sRules }:requiredNoNoNoNoNo
:optional { sRules }:optionalNoNoNoNoNo
:read-only { sRules }:read-onlyNoNoNoNoNo
:read-write { sRules }:read-writeNoNoNoNoNo

Pseudo-elements

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
:after { sRules }:afterNoNoNoNoYes
:before { sRules }:beforeNoNoNoNoYes
:first-letter { sRules }:first-letterNoYesYesYesYes
:first-line { sRules }:first-lineNoYesYesYesYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
::before { sRules }::beforeNoNoNoNoNo
::after { sRules }::afterNoNoNoNoNo
::first-letter { sRules }::first-letterNoNoNoNoNo
::first-line { sRules }::first-lineNoNoNoNoNo
::selection { sRules }::selectionNoNoNoNoNo
::value { sRules }::valueNoNoNoNoNo
::choices { sRules }::choicesNoNoNoNoNo
::repeat-item { sRules }::repeat-itemNoNoNoNoNo
::repeat-index { sRules }::repeat-indexNoNoNoNoNo

Attributes

CSS 2.1:
  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ sRule!important  }!important Declaration PartialPartialPartialYesYes

Lists

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ list-style : sStyle }list-styleYesYesYesYesYes
{ list-style-image : sStyle }list-style-imageYesYesYesYesYes
{ list-style-position : sStyle }list-style-positionYesYesYesYesYes
{ list-style-type : sStyle }list-style-typeNoNoNoPartialYes

Color and Background

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ color : sColor }colorYesYesYesYesYes
{ background : sBackground }backgroundYesYesYesYesYes
{ background-attachment : sAttachment }background-attachmentPartialPartialPartialYesYes
{ background-color : sColor }background-colorYesYesYesYesYes
{ background-image : sLocation }background-imageYesYesYesYesYes
{ background-position : sPosition }background-positionPartialPartialPartialPartialYes
{ background-repeat : sRepeat }background-repeatYesYesYesYesYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ color-profile : sProfile }color-profileNoNoNoNoNo
{ rendering-intent : sIntent }rendering-intentNoNoNoNoNo
{ background : sBackground1,
sBackground2, etc. }		background (multiple)NoNoNoNoNo
{ background-clip : sClip }background-clipNoNoNoNoNo
{ background-origin : sOrigin }background-originNoNoNoNoNo
{ background-break : sBreak }background-breakNoNoNoNoNo
{ background-size : sSize }background-sizeNoNoNoNoNo

Font and Text

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ direction : sDirection }directionYesYesYesYesYes
{ font : sFont }fontYesYesYesYesYes
{ font-family : sFamily }font-familyYesYesYesYesYes
{ font-size : sSize }font-sizeYesYesYesYesYes
{ font-style : sStyle }font-styleYesYesYesYesYes
{ font-variant : sVariant }font-variantYesYesYesYesYes
{ font-weight : sWeight }font-weightPartialPartialPartialPartialYes
 { letter-spacing : sSpacing }letter-spacingYesYesYesYesYes
 { line-height : sHeight }line-heightYesYesYesYesYes
{ text-align : sAlign }text-align YesYesYesYesYes
{ text-decoration : sDecoration }text-decoration YesYesYesYesYes
{ text-indent : sIndent }text-indent YesYesYesYesYes
{ text-transform : sTransform }text-transform YesYesYesYesYes
{ unicode-bidi : sAlign }unicode-bidi YesYesYesYesYes
{ vertical-align : sAlign }vertical-alignYesYesYesYesYes
{ white-space : sWrap }white-space PartialPartialPartialPartialYes
{ word-spacing : sSpacing }word-spacing PartialPartialPartialPartialYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ font-effect : sEffect }font-effectNoNoNoNoNo
{ font-emphasize : sEmphasize }font-emphasizeNoNoNoNoNo
{ font-size-adjust : sSizeAdjust }font-size-adjustNoNoNoNoNo
{ font-smooth : sSmooth }font-smoothNoNoNoNoNo
{ font-stretch : sStretch }font-stretchNoNoNoNoNo
{ hanging-punctuation : sHangingPunctuation }hanging-punctuationNoNoNoNoNo
{ punctuation-trim : sTrim }punctuation-trim NoNoNoNoNo
{ ruby-align : sRubyAlign }ruby-alignYesYesYesYesYes
{ ruby-overhang : sRubyOverhang }ruby-overhangYesYesYesYesYes
{ ruby-position : sRubyPlacement }ruby-position YesYesYesYesYes
{ ruby-span : sRubySpan }ruby-spanNoNoNoNoNo
{ text-align-last : sAlignLast }text-align-last PartialPartialPartialPartialPartial
{ text-emphasis : sEmphasis }text-emphasis NoNoNoNoNo
{ text-justify : sJustify }text-justify NoYesYesYesYes
{ text-outline : sOutline }text-outline NoNoNoNoNo
{ text-overflow : sOverflow}text-overflow NoPartialPartialPartialPartial
{ text-shadow : sShadow }text-shadow NoNoNoNoNo
{ text-wrap : sWrap }text-wrap NoNoNoNoNo
{ word-break : sBreak }word-break PartialPartialPartialPartialPartial
{ word-wrap : sWrap }word-wrap YesYesYesYesYes
{ writing-mode : sFlow }writing-mode YesYesYesYesYes

Generated Content

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ content : sContent }contentNoNoNoNoYes
{ counter-increment : sCounter }counter-incrementNoNoNoNoYes
{ counter-reset : sCounter }counter-resetNoNoNoNoYes
{ quotes : sQuotes } quotesNoNoNoNoYes

Border and Layout

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ border : sBorder }border YesYesYesYesYes
{ border-bottom : sBottom }border-bottomNoYesYesYesYes
{ border-bottom-color : sColor }border-bottom-colorYesYesYesYesYes
{ border-bottom-style : sStyle }border-bottom-styleNoYesYesYesYes
{ border-bottom-width : sWidth }border-bottom-widthNoYesYesYesYes
{ border-collapse : sCollapse }border-collapsePartialPartialPartialPartialYes
{ border-color : sColor }border-colorYesYesYesYesYes
{ border-left : sLeft }border-leftNoYesYesYesYes
{ border-left-color : sColor }border-left-colorYesYesYesYesYes
{ border-left-style : sStyle }border-left-styleNoYesYesYesYes
{ border-left-width : sWidth }border-left-widthNoYesYesYesYes
{ border-right : sRight}border-rightNoYesYesYesYes
{ border-right-color : sColor }border-right-colorYesYesYesYesYes
{ border-right-style : sStyle }border-right-styleNoYesYesYesYes
{ border-right-width : sWidth }border-right-widthNoYesYesYesYes
{ border-spacing : sSpacing }border-spacingNoNoNoNoYes
{ border-style : sStyle }border-styleNoPartialPartialPartialYes
{ border-top : sTop }border-topNoYesYesYesYes
{ border-top-color : sColor }border-top-colorYesYesYesYesYes
{ border-top-style : sStyle }border-top-styleNoYesYesYesYes
{ border-top-width : sWidth }border-top-widthNoYesYesYesYes
{ border-width : sWidth }border-widthYesYesYesYesYes
{ caption-side : sLocation }caption-sideNoNoNoNoYes
{ clear : sClear }clearYesYesYesYesYes
{ empty-cells : sEmptyCells } empty-cellsNoNoNoPartialYes
{ float : sFloat }floatYesYesYesYesYes
{ margin : sMargin }marginYesYesYesYesYes
{ margin-bottom : sHeight }margin-bottomYesYesYesYesYes
{ margin-left : sWidth }margin-leftYesYesYesYesYes
{ margin-right : sWidth }margin-rightYesYesYesYesYes
{ margin-top : sHeight }margin-topYesYesYesYesYes
{ padding : sPadding }paddingYesYesYesYesYes
{ padding-bottom : sPadding }padding-bottomYesYesYesYesYes
{ padding-left : sPadding }padding-leftYesYesYesYesYes
{ padding-right : sPadding }padding-rightYesYesYesYesYes
{ padding-top : sPadding }padding-topYesYesYesYesYes
{ table-layout : sLayout }table-layoutYesYesYesYesYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ border-break : sBreak }border-breakNoNoNoNoNo
{ border-image : sImage }border-imageNoNoNoNoNo
{ border-radius : sRadius }border-radiusNoNoNoNoNo
{ box-shadow : sShadow }box-shadow NoNoNoNoNo

Positioning

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ bottom : sBottom }bottom NoPartialPartialPartialYes
{ clip : sClip }clip NoYesYesYesYes
{ display : sDisplay }display PartialPartialPartialPartialYes
{ height : sHeight }heightYesYesYesYesYes
{ left : sPosition }leftNoPartialPartialPartialYes
{ max-height : sMaxHeight }max-height NoNoNoYesYes
{ max-width : sWidth }max-widthNoNoNoYesYes
{ min-height : sMinHeight }min-height NoNoNoYesYes
{ min-width : sMinWidth }min-widthNoNoNoYesYes
{ overflow : sOverflow }overflowPartialPartialPartialYesYes
{ position : sPosition }position PartialPartialPartialYesYes
{ right : sPosition }rightNoPartialPartialPartialYes
{ top : sTop }topNoPartialPartialPartialYes
{ visibility : sVisibility }visibilityYesYesYesYesYes
{ width : sWidth }widthYesYesYesYesYes
{ z-index : vOrder }z-indexPartialPartialPartialPartialYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ overflow-x : sOverflow }overflow-xPartialPartialPartialYesYes
{ overflow-y : sOverflow }overflow-yPartialPartialPartialYesYes

Printing

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ orphans : nLines }orphansNoNoNoNoYes
{ page-break-after : sBreak }page-break-afterYesYesYesYesYes
{ page-break-before : sBreak }page-break-beforeYesYesYesYesYes
{ page-break-inside : sBreak }page-break-insideNoNoNoNoYes
{ widows : nLines }widowsNoNoNoNoYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ fit : sFit }fitNoNoNoNoNo
{ fit-position : sPosition }fit-positionNoNoNoNoNo
{ image-orientation : sOrientation }image-orientation NoNoNoNoNo
{ page : sPage }pageNoNoNoNoNo
{ size : sSize }sizeNoNoNoNoNo

User Interface

CSS 2.1:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ cursor : sCursor }cursorNoYesYesYesYes
{ outline : sOutline }outlineNoNoNoNoYes
{ outline-color : sColor }outline-colorNoNoNoNoYes
{ outline-style : sStyle }outline-styleNoNoNoNoYes
{ outline-width : sWidth }outline-widthNoNoNoNoYes

CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ appearance : sAppearance }appearance NoNoNoNoNo
{ box-sizing : sSizing } box-sizingNoNoNoNoYes
{ icon : sIcon }iconNoNoNoNoNo
{ nav-down : sNavDown }nav-downNoNoNoNoNo
{ nav-index : sIndex }nav-index NoNoNoNoNo
{ nav-left : sNavLeft }nav-leftNoNoNoNoNo
{ nav-right : sNavRight }nav-rightNoNoNoNoNo
{ nav-up : sNavUp }nav-upNoNoNoNoNo
{ outline-offset : sOffset }outline-offsetNoNoNoNoNo
{ outline-radius : sRadius }outline-radiusNoNoNoNoNo
{ resize : sResize }resizeNoNoNoNoNo

Multi-column Layout


CSS 3:

  Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
{ column-break-after : sSize }column-break-after NoNoNoNoNo
{ column-break-before : sSize }column-break-before NoNoNoNoNo
{ column-break-inside : sSize }column-break-inside NoNoNoNoNo
{ column-count : sCount }column-count NoNoNoNoNo
{ column-gap : sSize }column-gapNoNoNoNoNo
{ column-rule : sRule }column-ruleNoNoNoNoNo
{ columns : sColumns }columnsNoNoNoNoNo

Speech

None of the following CSS 3 speech attributes supported in Internet Explorer:

  • voice-volume
  • voice-balance
  • speak
  • pause
  • pause-after
  • pause-before
  • rest
  • rest-before
  • rest-after
  • cue
  • cue-after
  • cue-before
  • mark
  • mark-before
  • mark-after
  • voice-family
  • voice-rate
  • voice-pitch
  • voice-pitch-range
  • voice-stress
  • voice-duration
  • phonemes

Media Queries

None of the following CSS 3 media query attributes is supported in Internet Explorer:

  • width
  • height
  • device-width
  • device-height
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Values

Numbers

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<number>YesYesYesYesYes
<length>YesYesYesYesYes
<percentage>YesYesYesYesYes
<integer>YesYesYesYesYes

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<angle>NoNoNoNoNo
<time>NoNoNoNoNo
<frequency>NoNoNoNoNo

Strings

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<string>YesYesYesYesYes
\codeNoNoYesYesYes

Shapes

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
rect()NoYesYesYesYes

Functions

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
url()YesYesYesYesYes
counter()NoNoNoNoYes
attr()NoNoNoNoYes

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
calc()NoNoNoNoNo

Colors

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<color> (names)YesYesYesYesYes
<color> (#rrggbb or #rgb Notation)YesYesYesYesYes
<color> (rgb(r,g,b) Notation)YesYesYesYesYes
<color> (system colors)YesYesYesYesYes
transparentNoNoPartialYesYes

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
<color> (rgba(r,g,b,a) Notation)NoNoNoNoNo
<color> (hsl(h,s,l) Notation)NoNoNoNoNo
<color> (hsla(h,s,l,a) Notation)NoNoNoNoNo

Keywords

CSS 2.1:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
autoNoNoPartialYesYes
inheritNoNoNoNoYes

CSS 3:

 Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8
initialNoNoNoNoNo

Units

All of the following units are supported in Internet Explorer 3.0 and later:

  • px
  • pt
  • pc
  • cm
  • mm
  • in
  • em
  • ex
  • %

None of the following CSS 3 units is supported in Internet Explorer:

  • deg
  • grad
  • rad
  • ms
  • s
  • Hz
  • kHz
  • turn
  • gd
  • rem
  • vw
  • vh
  • vm
  • ch

See Also


 
Page view tracker