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.

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.

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.

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.

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.