Opacity issues in Chrome and IE

Question

Hi.. I am seeing weird behavior in IE 7 and Chrome with changing the opacity on a transparent background png in my navigation.

the CSS :

 ul.tabs a {
    height: 48px;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    }

 div.header ul.tabs a:hover {  
    filter:alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
    }

Answer 1

I believe the reason why the rendering looks bad in IE7 is because IE7 doesn't handle opacity well. Rick Strahl noticed the problem in a blog post titled Internet Explorer 7.0 and Opacity: Not even close!

One comment to that blog post linked to an IE Blog post Notes on the interaction of ClearType with DXTransforms in IE7 where we learn that the IE Team is aware of the problem and offers an "explanation" that includes this gem:

"As our users also noticed, the ClearType text then looks extremely blurry - unfortunately these two technologies just don’t mix well. This is because the basic convolution transform used by DXTransforms does not take into account the spatial nature of ClearType."

I believe the IE Team was able to incorporate ClearType spatial convolution transform accountability into IE8 but, alas, this did not make it into IE7.