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
All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)
Internet Explorer and Expanding Box Problem
Disappearing List-Background bug
Unscrollable Content bug
Duplicate Characters Bug
IE and Italics
Doubled Float-Margin bug
Duplicate Indent bug
Three pixel text jog
Creeping Text bug
Missing First letter bug
Phantom box bug
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
Enable :hover on all elements not just on
Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
Finally, we added new features from CSS2.1:
Min/max width/height support (also for images, which did not work in IE7b2)
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:
The IE 7 Readiness Toolkit pulls together documentation, tools, and guidance for developers, testers, and ITPros to prepare sites, extensions and applications for IE 7.
The Cascading Style Sheet Compatibility in Internet Explorer 7 – documentation on common breaking patterns and techniques you can do to avoid them.
Developer and ITPro Checklists
The IE Developer Center is the clearinghouse for all (past and present) IE developer information.
We have an Application Compatibility Toolkit that logs and identifies changes in behavior due to changes in IE 7 and Vista.
All of this is wrapped up for you in the Information Index for IE 7.
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.