IE bold text + opacity problem
You know how IE's alpha opacity filter ruins boldface text?
<div style="width:100%; filter:alpha(opacity=90); font-weight:bold;"> Hello world! </div>
If you're using IE, you can see the problem in action here:
I discovered this while tweaking the opacity filter function I wrote about earlier.
After much fruitless Googling and consulting with webdev experts, I couldn't find a fix. And like most solutions, I had to stumble upon it at the eleventh hour: adding a background color or image to the container element will fix the IE opacity rendering problem.
<div style="width:100%; filter:alpha(opacity=90); font-weight:bold; background-color:#fff"> Hello world! </div>
Here it is again, with the fix:
Hopefully the search engines will find this page and no one will have to suffer as I have ever again.
UPDATE: SZOJ reader Andre points out that this bug probably surfaced when MS introduced ClearType rendering, which probably explains why the bug goes away when "font smoothing" is disabled.