IE needs background-color if opacity is used on bold text

[shapeshifta78]

You can read about the Problem here:
http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html

I think this applies to ie6-8 (win xp, cleartype on), here is a test-case:
http://jsfiddle.net/shapeshifta/5fxhV/

[nzakas]

It sounds like you're suggesting a new rule. Can you please summarize the rule and provide sample code in the issue?

[shapeshifta78]

Rule: Don't use filter:alpha(opacity=XX) on bolded text without setting a background-color if you are targeting IE6-8.

.noBackground{ filter:alpha(opacity=90);font-weight:700 } /* should produce a warning */
.wBackground { filter:alpha(opacity=90);font-weight:700;background:#fff } /* no warning */

I already provided some sample code in my fiddle: http://jsfiddle.net/shapeshifta/5fxhV/
Have a look at it in ie6-8 on a windows xp machine and you will see the problem. See http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html for more details.

[dmcass]

This rule should probably be altered to include all IE filters. Using any filter on an element that contains text (at any level of descendance) disables ClearType and ruins font-smoothing.

For example:

<div class="transparent">
  <p>This is text in a semi-transparent container!</p>
</div>
<div class="gradient">
  <p>This is text over a gradient background!</p>
</div>

.transparent {
  /* Disables cleartype on element and any descendants */
  filter: alpha(opacity=75);
}
.gradient {
  /* Ditto */
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#FF000000, endColorstr=#FFFFFFFF);
}

Generally speaking, I'd suggest that filters shouldn't be used. CSS Lint should issue a warning for the filter declaration regardless of value and note that they disable ClearType when the element contains text.

[stubbornella]

I've seen some very nutty bugs using filters to simulate gradient backgrounds. It actually causes layout issues like 1px spaces between elements.

[dmcass]

Months later...I'd been intending to add a citation to my above post, but kept forgetting. There's certainly ways of hacking around the filter issues, but in general they tend to create more problems than they solve. I'd still argue that all filters warrant a warning.

Linkage:
StackOverflow
IE Blog