图像在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规则的总结。

注意:在您的示例结构中，在我在演示中添加的<li>之前缺少<ul>或<ol>。