HTML and CSS Technical Articles
CSS Compatibility and Internet Explorer
This is preliminary documentation
and is subject to change.
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 planned to be a fully CSS Level 2.1-compliant browser, and will
support some features of 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 Beta 2 and planned support in the final version of Internet Explorer
8.
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 for CSS 3.
A value of "Yes" in a cell indicates that that feature is implemented in that
version of Internet Explorer. (For the "IE 8.0" column, a value of "Yes"
indicates that the feature is currently planned for implementation in Internet
Explorer 8.)
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:
| | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| @charset | No | Yes | Yes | Yes | Yes | Yes | Yes |
| @import | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| @media | No | Yes | Yes | Yes | Yes | Yes | Yes |
| @page | No | Yes | Yes | Yes | Yes | No* | Yes |
CSS 3:
| | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
|
@font-face | No | Yes | Yes | Yes | Yes | Yes | Yes |
| @namespace |
No |
No |
No |
No |
No |
No |
No |
Selectors
Element Selectors
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| .value {
sRules } | Class
(see Note) | Partial | Partial | Partial | Yes | Yes | Yes | Yes |
| #value {
sRules
} | ID | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| E { sRules } | Type | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| * { sRules
} |
Universal | No | No | No | Yes | Yes | Yes | Yes |
Note Prior to Internet Explorer 7, there was a
two-class selector limit per element.
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| ns|E {
sRules } | Namespaced | No | No | No | No | No | No | No |
Attribute Selectors
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| [att=val]
{ sRules } |
Equality [=] | No | No | No | Yes | Yes | Yes | Yes |
| [att] { sRules
} |
Existence [] | No | No | No | Yes | Yes | Yes | Yes |
| [att|=val]
{ sRules } |
Hyphen [|=] | No | No | No | Yes | Yes | Yes | Yes |
| [att~=val]
{ sRules } |
Whitespace [~=] | No | No | No | Yes | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| [ns|attr] {
sRules } | Namespaced | No | No | No | Yes | Yes | Yes | Yes |
| [att^=val]
{ sRules } |
Prefix [^=] | No | No | No | Yes | Yes | Yes | Yes |
| [att*=val]
{ sRules } |
Substring [*=] | No | No | No | Yes | Yes | Yes | Yes |
| [att$=val]
{ sRules } |
Suffix [$=] | No | No | No | Yes | Yes | Yes | Yes |
Combinators
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| E + F { sRules
} |
Adjacent Sibling (+) | No | No | No | Yes | Yes | Yes | Yes |
| E > F { sRules
} |
Child (>) | No | No | No | Yes | Yes | Yes | Yes |
| E F { sRules } |
Descendant | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| E ~ F { sRules
} |
General Sibling (~) | No | No | No | Yes | Yes | Yes | Yes |
Pseudo-classes
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| :active { sRules } |
:active | No | No | No | Partial | Partial | Partial | Yes |
| :first-child { sRules } |
:first-child | No | No | No | Yes | Yes | Yes | Yes |
| :focus { sRules } |
:focus | No | No | No | No | Yes | Yes | Yes |
| :hover { sRules } |
:hover | Partial | Partial | Partial | Yes | Yes | Yes | Yes |
| :lang(C) {
sRules } | :lang() | No | No | No | No | Yes | Yes | Yes |
| :link { sRules } |
:link | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| :visited { sRules } |
:visited | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| @page :first {
sRules } |
@page :first | No | No | No | No | No | No | Yes |
| @page :left {
sRules } |
@page :left | No | No | No | No | No | No | Yes |
| @page :right {
sRules } |
@page :right | No | No | No | No | No | No | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| :root { sRules } | :root | No | No | No | No | No | No | No |
| :nth-child() { sRules } | :nth-child() | No | No | No | No | No | No | No |
| :nth-last-child() { sRules } | :nth-last-child() | No | No | No | No | No | No | No |
| :nth-of-type() { sRules } | :nth-of-type() | No | No | No | No | No | No | No |
| :nth-last-of-type() { sRules
} | :nth-last-of-type() | No | No | No | No | No | No | No |
| :last-child { sRules } | :last-child | No | No | No | No | No | No | No |
| :first-of-type { sRules } | :first-of-type | No | No | No | No | No | No | No |
| :last-of-type { sRules } | :last-of-type | No | No | No | No | No | No | No |
| :only-child { sRules } | :only-child | No | No | No | No | No | No | No |
| :only-of-type { sRules } | :only-of-type | No | No | No | No | No | No | No |
| :empty { sRules } | :empty | No | No | No | No | No | No | No |
| :target { sRules } | :target | No | No | No | No | No | No | No |
| :not(X) {
sRules } | :not() | No | No | No | No | No | No | No |
| :enabled { sRules } | :enabled | No | No | No | No | No | No | No |
| :disabled { sRules } | :disabled | No | No | No | No | No | No | No |
| :checked { sRules } | :checked | No | No | No | No | No | No | No |
| :indeterminate { sRules } | :indeterminate | No | No | No | No | No | No | No |
| :default { sRules } | :default | No | No | No | No | No | No | No |
| :valid { sRules } | :valid | No | No | No | No | No | No | No |
| :invalid { sRules } | :invalid | No | No | No | No | No | No | No |
| :in-range { sRules } | :in-range | No | No | No | No | No | No | No |
| :out-of-range { sRules } | :out-of-range | No | No | No | No | No | No | No |
| :required { sRules } | :required | No | No | No | No | No | No | No |
| :optional { sRules } | :optional | No | No | No | No | No | No | No |
| :read-only { sRules } | :read-only | No | No | No | No | No | No | No |
| :read-write { sRules } | :read-write | No | No | No | No | No | No | No |
Pseudo-elements
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| :after { sRules } |
:after | No | No | No | No | Yes | Yes | Yes |
| :before { sRules } |
:before | No | No | No | No | Yes | Yes | Yes |
| :first-letter { sRules } |
:first-letter | No | Yes | Yes | Yes | Yes | Yes | Yes |
| :first-line { sRules } |
:first-line | No | Yes | Yes | Yes | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| ::before { sRules } | ::before | No | No | No | No | No | No | No |
| ::after { sRules } | ::after | No | No | No | No | No | No | No |
| ::first-letter { sRules } | ::first-letter | No | No | No | No | No | No | No |
| ::first-line { sRules } | ::first-line | No | No | No | No | No | No | No |
| ::selection { sRules } | ::selection | No | No | No | No | No | No | No |
| ::value { sRules } | ::value | No | No | No | No | No | No | No |
| ::choices { sRules } | ::choices | No | No | No | No | No | No | No |
| ::repeat-item { sRules } | ::repeat-item | No | No | No | No | No | No | No |
| ::repeat-index { sRules } | ::repeat-index | No | No | No | No | No | No | No |
Attributes
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| { sRule!important } |
!important Declaration | Partial | Partial | Partial | Yes | Yes | Yes | Yes |
Lists
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| { list-style :
sStyle } |
list-style | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { list-style-image
: sStyle } |
list-style-image | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { list-style-position
: sStyle } |
list-style-position | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { list-style-type :
sStyle } |
list-style-type | No | No | No | Partial | Yes | Yes | Yes |
Color and Background
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| { color : sColor } |
color | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { background :
sBackground } |
background | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { background-attachment
: sAttachment } |
background-attachment | Partial | Partial | Partial | Yes | Yes | Yes | Yes |
| { background-color
: sColor } |
background-color | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { background-image
: sLocation } |
background-image | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { background-position
: sPosition } |
background-position | Partial | Partial | Partial | Partial | Yes | Yes | Yes |
| { background-repeat
: sRepeat } |
background-repeat | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| { color-profile :
sProfile } | color-profile | No | No | No | No | No | No | No |
| { rendering-intent
: sIntent } | rendering-intent | No | No | No | No | No | No | No |
{ background :
sBackground1,
sBackground2, etc. } | background (multiple) | No | No | No | No | No | No | No |
| { background-clip :
sClip } | background-clip | No | No | No | No | No | No | No |
| { background-origin
: sOrigin } | background-origin | No | No | No | No | No | No | No |
| { background-break
: sBreak } | background-break | No | No | No | No | No | No | No |
| { background-size :
sSize } | background-size | No | No | No | No | No | No | No |
Font and Text
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| { direction :
sDirection } |
direction | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { font : sFont } |
font | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-family :
sFamily } |
font-family | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-size : sSize
} |
font-size | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-style :
sStyle } |
font-style | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-variant :
sVariant } |
font-variant | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-weight :
sWeight } |
font-weight | Partial | Partial | Partial | Partial | Partial | Yes | Yes |
| { letter-spacing
: sSpacing } |
letter-spacing | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { line-height
: sHeight } |
line-height | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { text-align :
sAlign } |
text-align
| Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { text-decoration :
sDecoration } |
text-decoration
| Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { text-indent :
sIndent } |
text-indent
| Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { text-transform :
sTransform } |
text-transform
| Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { unicode-bidi :
sAlign } |
unicode-bidi
| Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { vertical-align :
sAlign } |
vertical-align | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| { white-space :
sWrap } |
white-space
| Partial | Partial | Partial | Partial | Yes | Yes | Yes |
| { word-spacing :
sSpacing } |
word-spacing
| Partial | Partial | Partial | Partial | No | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE8 Beta 1 | IE8 Beta 2 | IE 8.0 |
| { font-effect :
sEffect } | font-effect | No | No | No | No | No | No | No |
| { font-emphasize :
sEmphasize } | font-emphasize | No | No | No | No | No | No | No |
| { font-size-adjust
: sSizeAdjust } | font-size-adjust | No | No | No | No | No | No | No |
| { font-smooth :
sSmooth } | font-smooth | No | No | No | No | No | No | No |
| { font-stretch :
sStretch } | font-stretch | No | No | No | No | No | No | No |
| { hanging-punctuation
: sHangingPunctuation } | hanging-punctuation | No | No | No | No | No | No | No |
| { punctuation-trim
: sTrim } | punctuation-trim | No | No | No | No | No | No | No |
| { ruby-align :
sRubyAlign } |
ruby-align | Yes | Yes | Yes | Yes | No | Yes | Yes |
| { ruby-overhang :
sRubyOverhang } |
ruby-overhang | Yes | Yes | Yes | Yes | No | Yes | Yes |
| { ruby-position :
sRubyPlacement } |
ruby-position
| Yes | Yes | Yes | Yes | No | Yes | Yes |
| { ruby-span :
sRubySpan } | ruby-span | No | No | No | No | No | No | No |
| { text-align-last :
sAlignLast } |
text-align-last
| Partial | Partial | Partial | Partial | Partial | Partial | Partial |
| { text-emphasis :
sEmphasis } | text-emphasis | No | No | No | No | No | No | No |
| { text-justify :
sJustify } |
text-justify
|