Details on our CSS changes for IE7
We are currently locking down IE7 for shipping and I wanted to give an update on the CSS work that went into IE7. Chris originally outlined our plans for IE7, and we listened to a lot of feedback (blog, connect database, conferences, our WASP partnership etc.) to help us address the most grievous bugs and prioritize which features to put in for IE7. I like to thank especially the contributors on this blog for their participation. Your feedback made a difference in deciding what issues to address.
We understand that we are far from being done and we know we have still a lot of work ahead of us. IE 7 is a stepping stone in our effort to improve our standards compliance (especially around CSS). As an example, in the platform we did not focus on any proprietary properties – though we may try out new features in the future using the official –ms- prefix, following the CSS extension mechanism. We also work very closely with the W3C CSS working group (which I am a member of) to help clarify assumptions in our implementation and drive clarifications into the spec. I really like to thank everyone who helped us here.
In all, we made over 200 behavior changes (bug fixes or new features) under strict mode to improve CSS2.1 compliance. All this work (with the exception of transparent PNGs) has been done under the <!DOCTYPE> switch only, since all changes required behavioral updates to be more in line what the CSS spec specifies. To preserve application compatibility we will not make any behavioral changes to “quirks mode” as it has been established since IE6.
Here is the list of CSS features and changes for IE7:
Bugs we fixed
Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed:
- Overflow now works correctly! (That means boxes do not automatically grow any more.)
- Parser bugs: * html, _property and /**/ comment bug
- Select control: CSS style-able and not always on top
- Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
- Addressed many relative positioning issues
- Addressed many absolute positioned issues
- % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
- <?xml> prolog no longer causes quirks mode
- HTML element truly independent of the Body (now gets its own width, height etc.)
- 1 px dotted borders no longer render as dashed
- Bottom margin bug on hover does not collapse margins
- Several negative margin issues fixed
- Recalc issues including relative positioning and/or negative margins are fixed now
- CLSID attribute of <object> tag no longer limited to 128 characters
- :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
- Descendant selector now works properly for grand children when combined with other selectors
- First-line and first-letter now applies when there is no space between word :first-line and opening brace {
- Pseudo-classes now are working as expected if selector is excluded
- The :link selector works now for anchor tag with href set to bookmark
- Addressed !important issues
- PositionIsEverything piefecta-rigid.htm now works
- List-item whitespace bug fixed
- Fixed Absolutely Buggy II
- Absolute positioned elements now use always correct containing block for positioning and size information
- Nested block elements now respect all overflow declarations (hidden, scroll, etc)
- Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
- <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
- We no longer lose the image aspect ratio on refresh
- Cleaned up our ident parsing according to CSS2.1 rules
- Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
- And many more
We also extended our existing implementations to comply with W3C specifications:
- Enable :hover on all elements not just on <a>
- Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
- Improved <object> fallback
Finally, we added new features from CSS2.1:
- Min/max width/height support (also for images, which did not work in IE7b2)
- Transparent borders
- Fixed positioning support
- Selectors: first-child, adjacent, attribute, child
- A couple of CSS 3 attribute selectors: prefix, suffix and substring since we were working already in the code base (also the general sibling selector)
- Alpha channel PNG support (Not a CSS feature but too important for designers to not call it out J)
Better Standards Support…
But as we’ve been continually reminded, better standards support in IE also means some pages break. As we struggle to balance the needs of our user customers with the desires of web developers, we need your help. The only way for us to continue to improve our standards support is to get your help in changing your sites for IE7. We have provided a set of documentation and tools to help you transition your pages to IE7:
Finally, as we’ve talked about before, we have a Web Developer Toolbar, which is a great aid during the development and debugging of a website.
We are already planning for the next IE release and will continue down the road of improving our CSS support.
Markus Mielke
Program Manager