图像在 ie7 中消失而不是显示

Question

我正在使用 CSS 悬停和不透明度，当您将鼠标悬停在一张图像上时，它会变成另一张图像，方法是将一个图像放在顶部并设置不透明度，以便它在悬停时消失并留下底部图像。代码如下：

#fade {
    overflow:hidden;
    margin:0 auto;


}
#fade img {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    }



#fade img.topfade:hover {
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
    filter:alpha(opacity=.5);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;

}

这在 ie8、ie9 和 firefox 中工作正常，但在 ie7 中，当第一个图像不可见时，第二个图像不存在。有人知道如何解决这个问题吗？

Answer 1

我已经制作了一个演示，它似乎适用于 Chrome、Firefox 和 IE7。

它在 IE8+ 中工作，因为 -ms-filter 规则是正确的，但是 IE7 中的不透明度是 filter:alpha(opacity=xx) 规则，值应为 0 到 100 之间。您当前的值 .5 使悬停图像几乎完全不透明（而且我不确定它是否有效）。

quirksmode 对 IE 的不同不透明度 CSS 规则进行了很好的总结。

注意：在您的示例结构中，您在我添加的

之前缺少

或
在演示中。