css不透明度在IE7中不起作用答案

【问题标题】：css opacity not working in IE7css不透明度在IE7中不起作用
【发布时间】：2011-02-26 00:08:40
【问题描述】：

我有这个测试页面：http://jsfiddle.net/VWnm9/7/。图像在我所有运行 IE7 或 IE8 的计算机上都正确褪色，除了一台运行 IE7 并且即使在 noext 模式下也不会褪色的计算机。

页面是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <style type="text/css">
        body {
            background: blue;
        }
        img {
            filter: alpha(opacity=10);
            opacity: 0.1;
        }
    </style>
</head>
<body>
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/c3/Extracted_pink_rose.png" />
</body>
</html>

有人知道为什么吗？

【问题讨论】：

css opacity not working in IE7的可能重复
其实我发了两次。第一次 SO 将我重定向到“提问”页面，所以我认为它丢失了我的问题。
如果能找出工作的 IE7 机器和不能工作的机器之间的区别，那将是一件好事。 IE7 版本可能与 Microsoft 更新略有不同？
我注意到在某些 Win 2k3 服务器机器上运行的 [一些] ie7 机器中缺乏对 filter: alpha 的支持。也许对包含在 Windows XP 而不是 2003 服务器中的图形库有依赖性？

标签： css internet-explorer-7 opacity

【解决方案1】：

您可能需要应用一些 MS 的过滤器。

例如：

img {
    opacity: 0.1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);  
}

More info about opacity on quirksmode.

【讨论】：

它不起作用。 -ms-filter 适用于兼容模式下的 IE8，AFAIK。
似乎 IE 可能需要在元素上定位才能对其应用过滤器。尝试添加zoom: 1。更多信息在这里：joseph.randomnetworks.com/archives/2006/08/16/…
这样的简单图像已经有了布局。但我尝试了 zoom:1 并设置宽度和高度以确保：没有任何改变。
很抱歉，但我似乎无法重现此错误，如果它仅在您的一台机器上，那么我对问题可能是什么一无所知。可能是IE7早期版本有bug，一台机器的iE7没有打补丁？

【解决方案2】：

不是 100% 肯定，但这可能是因为 IE 在透明 PNG 上使用 opacity 时遇到问题：请参阅 this SO question

【讨论】：

我成功测试了8台电脑。只有 1 台计算机不会使图像褪色。使用的 css 应该并且确实有效。问题出在那个不工作的IE7上。
@Alsciende 这是一般 IE 7 中的问题还是只有一台计算机？

【解决方案3】：

我通常最终会求助于半透明的 .PNG。当您需要支持 IE6 和某些版本的 IE7 时，它是比 CSS hack 更好的解决方案

【讨论】：

我认为 IE6 需要一些 javascript hack 来理解 PNG 图像中的 alpha 透明度。例如。这是一个这样的修复：twinhelix.com/css/iepngfix
我需要通过javascript调整不透明度，所以这不是一个选项。

【解决方案4】：

PNG 图片在这种情况下效果很好。

【讨论】：