dean.edwards.name/IE7/notes/

Notes

These notes accompany version 0.7.3 (alpha). I’ll update them as soon as I get a chance.

Summary

IE7 represents an amalgamation of disparate solutions to Explorer’s rendering problems. The solutions it provides can be summarised as follows:

The tenets for this development are (where possible):

And one additional consideration:

Background

If you are interested in the source code then you will need to understand the following JavaScript/programming concepts:

CSS2/3 Selectors

The IE7 script loads and parses all style sheets (at page load) and re-writes them. Simulating CSS2/3 in Explorer is achieved by converting CSS selectors that Explorer does not understand into selectors that it does understand - classes.

This means that most of the CSS fixes are performed using CSS!

For example:

p > a {
	/* blah blah blah */
}

becomes:

p a.ie7_22 {
	/* blah blah blah */
}

and:

[this="that"] {
	/* bling bling bling */
}

becomes:

*.ie7_23 {
	/* bling bling bling */
}

etc.

Explorer supports multiple class names. It has a buggy implementation (we fix this later) but it is sufficient for this solution.

Now it’s all well and good converting these unknown selectors into classes but just how do we assign those classes?

In previous notes I discussed writing a CSS query engine to assign classes. My initial solution relied on a Microsoft proprietary technology that allows interaction between CSS and JavaScript. However, I was never completely happy with this approach. So I ended up writing a CSS query engine anyway.

Fixed Positioning

This fix applies to both foregrounds and backgrounds.

I planned to implement a standard fix. That meant capturing the onscroll event and then re-positioning the background image or fixed element. However, thanks to James Denny, we have a much better solution.

The trouble with most of the fixed positioning solutions I’ve seen is that they result in "jerky" movement. When the page is scrolled you can see the fixed element being re-positioned. This is because onscroll events are fired constantly as the scrollbar is moved and the browser just can’t keep up. This solution use expressions to re-position the element or background image. I usually try to stay away from expressions as they tend to be slow. In this case they provide a perfect solution so they are allowed. The other "trick" in getting this to work is to always have a fixed background image on the document body. It doesn’t matter what the image is, it can even be a non-existant URL.

Here is the original fix as mailed to me by James Denny: ie_fixed.html

Check out James’s original solution. Notice the image flicker? I experienced this too. The news is that it is another Explorer bug. It can be fixed but only from the server. I’ve described how here.

Generated Content

[ I’ll update this soon. ]

Box-Model

  #tantek >
  #erik >
  #dean { voice-family: hacker; }

IE7 subverts the Microsoft proprietary property runtimeStyle. This is a kind of top-level style object that overrides any current cascaded style. All box-model adjustments are applied to this style object. Internally, all measurements are converted to their pixel equivalent. Converting to pixels means that we can mix and match measurement units and gives us the ability to compare min/max values.

This solution provides support for box-sizing: content-box. Unless I hear a good reason, it will be the only setting that IE7 supports (cue flood of good reasons).

If an element has min/max restrictions, the onresize event is captured for the element and its parent. When either is resized, the element’s width and height are recalculated.

You do not need to explicitly state box-sizing: content-box as it is assumed for all block elements.

Currently, this remains an imperfect solution. For example, it does not work very well when applied to the document body. I’ll work on improving it for the next release.

"layout"

Although I’ve done my best with the above solutions, there are still some issues that web-developers should be aware of.

I’ve been using Microsoft technologies too long. Now I can see inside them. Traditionally, Microsoft has built applications, particularly desktop applications. The object model inside Explorer appears to be a hybrid of a document model and their traditional application model. I mention this as it is important in understanding how Explorer renders pages. The switch for jumping from a document model to an application model is to give an element "layout". Elements acquire "layout" when they are assigned a numeric width or height.

To understand "layout", read the following Microsoft documents:

Finally getting to the point, when box-sizing: content-box is applied to an element, it acquires "layout". If certain elements are not rendering correctly (excessive padding/margins are a symptom), try adding box-sizing: content-box to its CSS properties. The element may reflow as originally intended.

PNG Transparency

IE7’s PNG solution is basically an inclusion of Erik Arvidsson’s nifty PNG Behavior.

My solution differs slightly in that it applies the hack directly to the style sheet. IE7 will also watch property changes (if you want to use PNG images for rollovers).

To avoid loading an empty image from the server (required by all PNG hacks), IE7 creates an x-bitmap in memory:

var NULL = "javascript:'#define x_width 1\\n#define x_height 1\\nstatic char x_bits[]={0x00}'";

It is important to understand how this solution works when applied as a background image. The solution relies on Microsoft’s filter property. This provides Explorer with visual effects not normally provided by standard HTML.

To achieve these visual effects Explorer creates a supra layer on the browser window. Now this is all guess-work of course but a noticeable affect is, that if an element has a PNG background, then none of its child elements will receive mouse events. Killing "hovers" and the like.

Because a filter is not a real background image, it cannot be offset using background-position nor can it be tiled using background-repeat.

HTML

For the time being I’m only fixing Explorer’s broken <abbr/> tag. The solution is very similar to this one, except that you no longer need to markup your HTML in any special way.