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 */
}

Answer 2

离开我的头顶，在父元素上设置不透明度意味着它的子元素得到，呃，不透明？同样。

要专门定位图像，请在每个css选择器后添加img; e.g：

#shareActionsBox .shareActionLink:hover img

只要父链接是某种东西（在这种情况下是悬停时），就可以

定位图像。

Answer 3

如果不定位<img>元素，我无法在IE6中使用它。我没有安装IE8，因此无法确定 this demo 是否可以在该浏览器中运行。但是，它适用于IE6，Chrome11和Firefox4。

此外，值得注意的是，如果您的comment.gif具有透明度，那么除非您设置background-color或使用JavaScript来处理悬停，否则透明部分可能会出现进一步的问题。参见我在此写的another answer。

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

3 个答案: