Cascading Style Sheet Compatibility in Internet Explorer 7
Internet Explorer 7 contains a number of improvements to cascading style sheet (CSS) parsing and rendering over IE6. These improvements are aimed at improving the consistency of how Internet Explorer interprets cascading style sheets as recommended by the W3C in order that developers have a reliable set of functionality on which to rely.In some cases a few of these changes may have the effect of making existing content render in ways that are not compatible with IE6. This is often seen with elements moving to a different area of the page or overlapping content when viewed in IE7. These issues are most common on content that is using particular CSS constructs (often know as “hacks” or filters) to work around bugs that existed under the strict mode in IE6. In this article we’ll discuss why pages might be broken due to updated CSS support and the best ways to address the issues that result from it.
Taking Compatibility Seriously
On the Internet Explorer team we consider compatibility to be an essential part of delivering a platform on which developers can build great solutions. We need to continue to display existing content in newer versions of the browser while at the same time adding improvements and new functionality. In order to address these seemingly conflicting goals we have what we loosely refer to as quirks and strict mode when interpreting content. Support for strict mode was introduced in Internet Explorer 6 and is determined by a declaration at the start of the HTML page. In quirks mode, we ensure compatibility so that existing content continues to render as it did in previous versions of IE. By contrast, in strict mode we work towards improved conformance with W3C recommendations, which may include changes that affect existing content.
Many of the issues around CSS parsing and display present in Internet Explorer 6 are well documented on sites such as www.quirksmode.org and www.positioniseverything.net.
In the case of CSS used for IE, we believe we are making the right decision by fixing bugs present in IE6 under strict mode even when this results in a change in rendering for pages.
Addressing Broken Pages in IE7
If a page is rendering differently in Internet Explorer 7 than in previous versions of IE then the first step is to diagnose the cause of the problem so that we can address it in the most efficient manner possible.
User Agent Strings and Browser Detection
Before looking at the effects of CSS changes in IE7 we should eliminate another common compatibility issue. Some sites serve different content based on the type and version of the browser that is being used to access them and are not expecting to be accessed by IE7. This is known as User Agent String detection and more details can be found at Detecting Internet Explorer More Effectively.
XML Prolog Bug Affecting the CSS Box Model
The XML prolog is intended to specify the version of XML being used and is mostly seen on the Web in conjunction with XHTML. As explained above, in IE6 we introduced a method to switch between quirks and strict mode. This switch had to be the first line of a page. Sadly the XML prolog required the same and most authors using the XML prolog would add it before the strict type switch. This caused IE6 to ignore the author’s intention and IE6 would render the page in quirks mode rather than strict. We fixed this issue in IE7. Now, you can have the XML prolog and immediately follow the strict mode switch to render XHTML properly. Sadly some pages build their content with the assumption that IE is not in strict mode (even though IE should according to the HTML spec). Rendering issues caused by the XML prolog fix can easily be identified: Open the view-source looking at the first two lines of the page. If you see the XML prolog and a strict <!DOCTYPE> and the page has rendering issues, it is most likely that the page author needs to update the content.
Box Model Changes
In IE7, we changed the behavior of overflow to align with the CSS2.1 box model. Overflow is describes as a method to specify whether content of a block-level element is clipped when it overflows the box. The default is visible. This value (visible) indicates that content is not clipped, i.e. it may be rendered outside the box. IE in the past did not support this behavior. Content always had to fit within a box dimensions. Imagine a box with width and height of 100px. If the content is smaller than 100px then IE would follow the specifications. If the content exceeded the size we would auto-grow the box to fit the content. To demonstrate this behavior, take a look at the following code sample.
<style type=”text/css”>
div { width : 100px; height: 100px; border: thin solid red;}
blockquote { width: 125px; height: 100px;
margin-top: 50px; margin-left: 50px;
border: thin dashed black}
cite { display: block;
text-align: right;
border: none}
p { margin: 0;}
</style>
<div>
<blockquote>
<p>some text long enough to make it interesting.</p>
<cite>- anonymous</cite>
</blockquote>
</div>
RSS/XML