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

【问题标题】：Opacity not working on img in IE8不透明度不适用于 IE8 中的 img
【发布时间】：2011-03-21 21:41:06
【问题描述】：

我的代码可以在 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 中改变不透明度？？

谢谢

【问题讨论】：

只是为了试用，你可以尝试给你的a标签的父级（可能是div左右）一个background-color: Blue（或任何其他颜色），看看是否然后过滤器工作？我记得有一个类似的问题是通过这种方式解决的。或者可能是 a 标签本身的背景颜色。
@Bazzz：我在发布之前添加了背景颜色。这是必要的，因为当您添加不透明度设置并添加背景使文本正确显示时，Firefox 使文本有点有趣。但是，这不是解决这个特定问题的方法。

标签： css

【解决方案1】：

MS 过滤器仅在 hasLayout 属性设置为 true 的情况下在 IE7 中有效，它们仅在 IE8 中的块元素上有效，或者如果您将显示属性设置为块或内联块.. 当您尝试使用它时在内联元素上，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 */
}

【讨论】：

感谢 Claire Suzy Q :) 我之前尝试过 display:block，但不是 display inline-block。它就像一个魅力！塔！
不客气，很高兴它有帮助，最近正在使用过滤器，只是分享我发现的内容

【解决方案2】：

在我的脑海中，在父元素上设置不透明度意味着它的子元素变得，呃，不透明？也是。

要专门针对图像，请在每个 css 选择器之后添加 img；例如：

#shareActionsBox .shareActionLink:hover img

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

【讨论】：

【解决方案3】：

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

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

【讨论】：