Anti-Aliasing in IE8 (and prior...)

I recently struggled with a client's website - they were complaining that the text "looks horrible". I figured out that it was IE8 that they were using (which I keep having to remind myself to test with!). The issue was that the body-style that was being used was not being anti-aliased, and looked quite jagged in the browser that my client was using.

It took me weeks of searching and asking CSS/HTML experts to assist...to no avail. I did, however, have a previous backup of the site's template that WAS smoothing the text correctly. To get the bottom of the issue, I worked out which file was causing the issue, then finally, what .css style.

It came down to a "filter" property that I needed to use to create a shadow behind a DIV.

My style was something like...

.shadow {
        filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
        -moz-box-shadow:2px 2px 2px #b0b0b0;
        -webkit-box-shadow:2px 2px 2px #b0b0b0;
        box-shadow:2px 2px 2px #b0b0b0;
}

This filter does not producte quite as nice shadows as the box-shadow attribute, but this is not supported until IE9. The major drawback is that IE for some reason disables anti-aliasing on elements that has this attribute.