Windows 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
- Positioning
- Printing
- User Interface
- Internet Explorer-specific Functionality
- 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 Standards 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-elements 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 CSS2.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 CSS2.1 compliance.
Color and Background
The behavior of the background-position attribute is now fully CSS2.1 compliant.
Font and Text
The behavior of the following text attributes is now fully CSS2.1 compliant:
- font-weight
-
white-space (new support for
pre-wrapandpre-linevalues) - word-spacing
In addition, the text-decoration attribute's overline behavior now more closely conforms to the CSS2.1 specification.
Generated Content
Internet Explorer 8 introduces full support for generated content, including the following attributes:
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 CSS2.1 compliant:
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 CSS2.1 specification.
Positioning
The behavior of the following positioning attributes is now fully CSS2.1 compliant:
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:
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:
In addition, Internet Explorer 8 introduces support for the box-sizing attribute.
Internet Explorer-specific Functionality
This section describes behavior not defined by the CSS2.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 Standards mode, EmulateIE7 mode, or IE5 (Quirks) mode. For more information on document compatibility modes, see Defining Document Compatibility.
Extensions to CSS
The following CSS attributes are Microsoft extensions to the CSS2.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-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
Provided you craft your layout code properly, IE8 displays standards-compliant code as well as Firefox, Safari, or even Chrome.
If you're using WYSIWYG editors and expecting them to write perfect code, then you likely need a stronger grasp of the subject. Just finished revamping a 5,000 page site's framework in with a 1.0 Transitional doctype. I have ZERO IE8+ Specific code in my CSS, and precisely 5 IE6-7 fixes in 3 classes. My site looks as good in IE8 as it does in Firefox.
While admittedly floats continue to be IE's bane, and IE6 and 7 are far from perfect when it comes to CSS support, if you can't easily get your page to render appropriately in IE8+ - you're doing something gravely wrong...
You are an idiot. IE won't even render a control right with Style="left: 121px". Tell me how that is "gravely wrong" you ***ing shill.
This is a LIE! IE8 still has all the same inadequacies, gaping holes, and flawed implementations that IE has always had. Anyone who develops compliant CSS knows better than to expect it to work in IE. Firefox, Chrome, and the others seem to have no particular problem getting it right--why can't Microsoft?
Like a prior commenter, I will also be charging extra to make pages work in IE.
Microsoft Connect: https://connect.microsoft.com/IE
IE Development: http://social.msdn.microsoft.com/Forums/en-US/category/iedevelopment
Thanks!
Esther Fan, MSFT
It is the Developers developing Corporate applications that will only work in Internet Explorer coded regardless of Web Standards. I am having to work with one application as such on a daily basis and it is terrifying! It will only work properly in Internet Explorer and our company has spend loads of cash on, that is not in favour of a long term investment.
What Microsoft can be blamed about is that they continue to allow this to happen. They have provided a solution to the problem, Strict !DOCTYPE.
http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx
Microsoft have imposed the rule of a document Web Standard Compliant Strict DOCTYPE declaration exists then render this document in Standards Mode and when there isn't one (or whatever anyone may like to have) renders in what is know as Quirks Mode or whatever Microsoft want to call it.
Only if MS certified Developers were knowledgeable enough to understand the benefits of one standard and look to see there isn't only Internet Explorer around... the WWW would be a much better place.
With the release of IE8 it was noted by Microsoft that the browser would be more compliant. I agree it is not as big of a failure that it once was but Microsoft, why just be more compliant and not go all the way? Why do you have to think the world is your oyster and everyone should view the world through your eyes? I relish in the thought that one day Microsoft will be forced out of the browser business!
Regardless of what the MORONS that develop IE think your days are numbered! I hope you have learned enough to be of value in some other area of the company? Because the way you have handled explorer it is obvious to everyone but yourselves that you cannot fix IE and you have NO idea of what it means to be compliant. There for your skill set is useless in the real world!
Microsoft internet explorer is a failure and NEVER worked right. As a web developer I have finally come to my senses and will only design a website that works with this totally worthless browser if the price is right. For that I thank you Microsoft for your failure has brought me some value. However it is not as much a reward as I would have thought because of the last 40 or so projects only 3 of them felt it was important enough to pay the extra fee. Hence my view of your end, proof that there is a higher power than Microsoft!