不透明不工作在img在IE8 [英] Opacity not working on img in IE8

问题描述

我有代码在Chrome和Firefox，但不是在IE8。

I have code that works in Chrome and Firefox, but not in 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中更改。它在其他浏览器中正常工作。

Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn't change in IE. It works fine in other browsers.

我怀疑这是因为img嵌套在链接中。如何获取图像以改变IE中的不透明度

I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??

感谢

推荐答案

MS过滤器仅在IE7中工作，如果hasLayout属性设置为true，它们只在块元素上的IE8中工作，或者如果您将display属性设置为block或inline-block ..这对一个内联元素，a，然后设置 display：inline-block; 应该解决它的所有IE的，因为它的工作设置hasLayout为IE7，也保持IE8快乐

MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy

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

这篇关于不透明不工作在img在IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！