IE8,透明PNG和过滤器:alpha

Question

我会切入正确的观点.这是输出:

(现在是一些可选代码 - 只有在您真正想要时才读取;))

这是标记:

<a href="/" id="logo_wrapper">
    <span class="logo logo_normal"></span>
    <span class="logo logo_hover"></span>
</a>

这是CSS(仅限于相关内容,为了您的阅读乐趣):

#logo_wrapper {
  position:relative;
}
#logo_wrapper .logo {
  display:block;
  width:260px;
  height:80px;
  background-image:url(logo.png);
  position:absolute;
}
#logo_wrapper .logo_normal {
  background-position:0 0;
}
#logo_wrapper .logo_normal:hover {
  opacity:0;
  filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover {
  background-position:0 -80px;
  opacity:0;
  filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover:hover {
  opacity:1;
  filter:alpha(opacity=100); /* THIS IS THE OFFENDER! */
}

只是为了澄清:我知道我可以单独使用span,只是background-position在悬停时切换徽标,但完整的CSS为真正的浏览器提供了可爱的CSS3过渡,不应该上下滚动徽标.

好的,所以,它是一个32位颜色深度的PNG,当然还有透明度.当我完全不使用alpha过滤器时,IE8中的一切都很好filter:alpha(opacity=0).但是,如果将不透明度设置为100,仅仅使用滤镜会导致IE8变得疯狂并使所有不完全透明的像素100%不透明.并不是说这个特殊的图像在这种效果下看起来很糟糕,但它仍然很烦人:D.

现在,我很清楚IE8因透明的PNG问题而臭名昭着,其中的问题可追溯到IE6及其透明区域的可怕的纯青色填充.可以通过一些IE行为修复黑魔法.

关于IE8可以做些什么？

Answer 1

一个简单的修复:只需为.logo_hover添加背景颜色:悬停和alpha过滤器再次正常工作.

显然,这个修复并不总是有用(也就是说,如果你不能在你的png下使用模仿真实背景的背景颜色).