不透明度不适用于IE8中的img

Question

我的代码适用于Chrome和Firefox,但不适用于IE8.

    <a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>

这个CSS是:

    .shareActionLink:link, .shareActionLink:visited
{   
    margin-right:8px;
    color:#999;
    opacity:0.6;
    filter: alpha(opacity=60);  /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
    background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
    color:#333;
    text-decoration:none;
    opacity:1.0;
    filter: alpha(opacity=100);  /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}

基于其他StackOverflow帖子,我添加了IE过滤器,这有助于调整文本不透明度,但是,IE中的图像不透明度仍然没有变化.它在其他浏览器中工作正常.

我怀疑这种情况正在发生,因为img嵌套在链接中.如何让图像在IE中改变不透明度？

谢谢

Answer 1

如果hasLayout属性设置为true,MS过滤器仅在IE7中工作,它们仅在块元素上的IE8中工作,或者如果您将display属性设置为block或inline-block ..因为您尝试在内联中使用它元素,a,然后设置display: inline-block;应解决所有IE的问题,因为它可以为IE7设置hasLayout并且还能让IE8保持开心

.shareActionLink {
    display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {   
    margin-right:8px;
    background: #fff;
    color:#999;
    opacity:0.6;
    filter: alpha(opacity=60);  /* IE */

}

.shareActionLink:hover {
    color:#333;
    text-decoration:none;
    opacity:1.0;
    filter: alpha(opacity=100);  /* IE */
}