A Primer on Designing for Internet Explorer 7

This primer is written from the perspective of having IE7 render in strict mode, rather than having it use the IE6 looking quirks mode (css support in strict vs quirks mode). This is to make web pages render closer to other modern browsers on multiple operating systems, thereby increasing the utility of the webpage. As such it will go over major changes from IE6 to IE7, and then illustrate techniques to tweak, cajole, and coerce the browser into rendering similarly to its brethren.

Sites designed exclusively for IE6 should render fine in quirks mode in IE7.

CSS Fixes in IE7

The IE7 team has taken the browser a major step forward, as evidenced by the following post at the team weblog. In addition to fixing nearly every IE6 bug on positioniseverything.net there were a number of additional rendering bugs squashed and increased standards support. PNG alpha transparency is also now supported by the browser.

With MS stating that there are 100 million downloads, and that it now accounts for 25% of US web traffic (and this is before Vista is public) it is a necessary browser to test.

Common Pointers

From Three reasons sites break in Internet Explorer 7:

Sites that have an XML declaration before the DOCTYPE, making IE 6 use quirks mode, but not IE 7. Both browsers still get the same CSS, so IE 7 renders it differently.
Sites that depend heavily on CSS hacks that no longer work in IE 7.
Sites that use conditional comments to feed a bugfix stylesheet to IE without specifying a version number, thereby making IE 7 load the bugfixes and mess up rendering.

You will (generally) find other rendering bugs that crop up. From personal experience I suggest getting a site that renders near enough to each other in Opera/Safari/Firefox (with IE6 limitations in mind) then use conditional comments to fix large errors, or if you wish inline css hacks.

Floats not clearing and * html hacks not applying seem to be the two main culprits in general.

Changes to IE Specific Hacking

Conditional Comments

The relative utility of using conditional comments has increased. Conditional Comments ensure that all IE targeted CSS (unlike the hacks below) are guaranteed to be future proof. For example we could include some generally IE specific content/code:

Or some IE7 and IE 6 and below code:

The parsers are if, lt, lte, gt, and gte.

* html and underscore hacks fixed

* html is no longer recognized. Thus “the hack is now considered to be a filter hack for IE6 and below. Since those old browsers will not change in the future, this "less-than-IE7" filter hack is very safe to use, and allows easy forking of CSS rules between IE6 and IE7 in a single stylesheet.” (PIE).

If you wish to send an inline CSS hack to IE7 only, the following will work.

*:first-child+html { /* IE7-specific rules */ }

Similarly if you want to send CSS to IE 4-6, then to other modern browsers, you can use the child selector which IE7 now supports:

#content { width: 300px; }

html>body #content { width: 350px; }

hasLayout and self-clearing floats

Many perplexing aspects of IE’s rendering can be understood once IE's hasLayout property is. Applying 1% height to IE (Win) using the Holly Hack gave "layout" to the affected elements. On having layout remains the de facto hasLayout guide.

The lack of support for :after as well as * html led to new approaches to self-clearing floats in IE7. The easiest solution at this point works in IE 4-7, Opera 7.5+, and reasonably new versions of webkit/gecko.

div #content { width: 100%; overflow: auto; }

height: 1%; can be used instead of width: 100%; but it will bug out in Opera 7.

hasLayout and zoom: 1

With the holly hack no longer applying to IE 7, you can also use (as recommended by the IE team) the proprietary zoom property to introduce hasLayout in IE 4/5+

div #content { zoom : 1; }

If you wish you can hide this non-validating solution in a conditional comment. The benefit of zoom:1 is it gives layout to an element but there is no chance of it impacting behaviour in other browsers.

Page Zoom

via zeldman: "IE7 is also the first Microsoft browser to permit user scaling. It does this the same way the Opera browser does it (which is the same way Microsoft Office does it): if text is too small, the user scales the entire page. By contrast, Safari and Firefox use Text Zoom, originally developed by Tantek Çelik for IE5/Mac. In those browsers, if text is too small, the user scales the text size—and nothing but the text size. Images, column widths, and so on, typically do not scale."

Here is the original IEblog post.