Internet Explorer 8 is fully compliant with the Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1) specification and supports some features of CSS, Level 3 (CSS3). This topic is composed of a comprehensive list of the changes to CSS support in Internet Explorer 8. For an at-a-glance look at CSS compliance across recent versions of Internet Explorer, see CSS Compatibility and Internet Explorer.

• Compatibility Note
• At-rules
• Pseudo-classes and Pseudo-elements
• Lists
• Color and Background
• Font and Text
• Generated Content
• Border and Layout
  • Floats
  • Margin Collapsing
• Positioning
• Printing
• User Interface
• Internet Explorer-specific Functionality
  • CSS Expressions
  • Extensions to CSS
• Data URIs
• Related Topics

Compatibility Note

The changes to CSS compliance in Internet Explorer 8 described in this topic will only function when your page is in IE8 mode (or EmulateIE8 mode with an Internet Explorer 8 !DOCTYPE directive). For more information on document compatibility modes, see Defining Document Compatibility.

At-rules

The @page rule now works as expected with the :first, :left, and :right selectors.

Pseudo-classes and Pseudo-elements

Internet Explorer 8 introduces support for the following pseudo-classes and pseudo-elements:

• :before and :after — In conjunction with the newly supported content property, you can use these pseudo-classes to describe dynamic ("generated") content to appear before and after elements in a document.
• :focus  — This pseudo-class applies while an element has input focus.
• :lang(C)  — This pseudo-class selects the elements that are in a given language.

In addition, the behavior of the :active pseudo-class is now fully CSS 2.1 compliant; it now applies to all elements, rather than just the a element.

Lists

Additional values have been added to the list-style-type attribute, bringing it to full CSS 2.1 compliance.

Color and Background

The behavior of the background-position attribute is now fully CSS 2.1 compliant.

Font and Text

The behavior of the following text attributes is now fully CSS 2.1 compliant:

• font-weight
• white-space (new support for pre-wrap and pre-line values)
• word-spacing

In addition, the text-decoration attribute's overline behavior now more closely conforms to the CSS 2.1 specification.

Generated Content

Internet Explorer 8 introduces full support for generated content, including the following attributes:

• content
• counter-increment
• counter-reset
• quotes

In conjunction with the content property, the newly supported :before and :after pseudo-classes enable you to describe dynamic ("generated") content to appear before and after elements in a document.

Border and Layout

Internet Explorer 8 introduces support for the following:

• The separated borders model (border-spacing attribute)
• Caption position and alignment (caption-side attribute)

The behavior of the following attributes is now fully CSS 2.1 compliant:

• border-collapse
• border-style
• empty-cells

Floats

Many changes have been made to float behaviors, fixing many of the most troubling float issues encountered with prior versions of Internet Explorer, including those caused by the requirement of the hasLayout property. The hasLayout functionality has been removed in Internet Explorer 8. The following are some of the issues fixed:

• Cleared elements don't clear other nested floats when they don't share a parent.
• Cleared elements after floats have doubled top padding.

Margin Collapsing

Many changes have been made to margin collapsing behavior, fixing many of the most troubling collapsing issues encountered with prior versions of Internet Explorer, and bringing margin collapsing behavior into compliance with the CSS 2.1 specification.

Positioning

The behavior of the following positioning attributes is now fully CSS 2.1 compliant:

• bottom
• clip
• display
• left
• right
• top
• z-index

The display attribute now supports the full range of table layout values from the W3C Cascading Style Sheets Level 2.1 Specification . For many years, tables were the preferred layout mechanism on the Internet. With Internet Explorer 8, it is now possible to apply table-style formatting to non-table elements by using the display attribute. In practice, CSS tables are more permissive than HTML markup; tables created with CSS rules will nest elements to become valid, whereas tables created with HTML will close containers to avoid unexpected nesting.

The display attribute also supports ruby styles from the CSS3 Ruby Module .

Printing

Internet Explorer 8 introduces support for the following printing attributes:

• page-break-inside
• widows
• orphans

For more information on CSS printing functionality, see CSS How-to - Optimize Pages for Printing Using CSS.

User Interface

Internet Explorer 8 introduces support for the outline attributes, which enable elements to be highlighted without affecting their size. This includes fully CSS 2.1-compliant support for the following attributes:

• outline
• outline-color
• outline-style
• outline-width.

In addition, Internet Explorer 8 introduces support for the box-sizing attribute.

Internet Explorer-specific Functionality

This section describes behavior not defined by the CSS 2.1 specification.

CSS Expressions

Support for "CSS Expressions," or Dynamic Properties, has ended for Internet Explorer 8 in IE8 mode (or EmulateIE8 mode with an Internet Explorer 8 !DOCTYPE directive) for standards-compliance and performance reasons. However, they will still function as expected in Internet Explorer 8 on pages in IE7 mode, EmulateIE7 mode, or IE5 mode. For more information on document compatibility modes, see Defining Document Compatibility.

Extensions to CSS

The following CSS attributes are Microsoft extensions to the CSS 2.1 specification and should be specified with an -ms- prefix in IE8 mode:

• -ms-accelerator
• -ms-background-position-x
• -ms-background-position-y
• -ms-behavior
• -ms-filter
• -ms-ime-mode
• -ms-layout-flow
• -ms-layout-grid
• -ms-layout-grid-char
• -ms-layout-grid-line
• -ms-layout-grid-mode
• -ms-layout-grid-type
• -ms-line-break
• -ms-overflow-x
• -ms-overflow-y
• -ms-scrollbar-3dlight-color
• -ms-scrollbar-arrow-color
• -ms-scrollbar-base-color
• -ms-scrollbar-darkshadow-color
• -ms-scrollbar-face-color
• -ms-scrollbar-highlight-color
• -ms-scrollbar-shadow-color
• -ms-scrollbar-track-color
• -ms-text-align-last
• -ms-text-autospace
• -ms-text-justify
• -ms-text-kashida-space
• -ms-text-overflow
• -ms-text-underline-position
• -ms-word-break
• -ms-word-wrap
• -ms-writing-mode
• -ms-zoom

Data URIs

A data Uniform Resource Identifier (URI) allows a Web page author to embed small entities directly within a URI, rather than using the URI to identify a location from which to retrieve the entity. This is primarily of interest for small images (such as a bullet) used within CSS or layout. For more information, see data Protocol.

Related Topics

• CSS Compatibility and Internet Explorer