文章/答案/技术大牛

发布

社区首页 >问答首页 >如何解决IE8中衰落的半透明PNG错误？

问如何解决IE8中衰落的半透明PNG错误？
EN

Stack Overflow用户

提问于 2009-07-30 04:32:49

回答 14查看 80.8K关注 0票数 36

如您所知，IE6有一个错误，如果不使用非标准样式的过滤器，就无法显示半透明的PNG文件。在IE7中，这个问题是固定的。但是它仍然有一些关于PNG文件的错误。它不能正确显示衰落半透明的PNG文件。当您在jQuery中使用带有半透明PNG文件的显示/隐藏函数时，可以清楚地看到它。图像的背景以不透明的黑色显示。

你对用jQuery解决这个问题有什么想法吗？

更新

让我们看看我的测试

9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

正如您所看到的，IE8总是不正确地显示PNG-24图像.此外，IE8仅在淡出(jQuery.fadeOut函数)时仍能正确显示PNG-8图像.但当我同时淡出和调整(jQuery.hide函数)时，它却不正确地显示PNG-8图像.

PS。您可以从这里下载我的测试源代码。

谢谢，

png

jquery

internet-explorer

回答 14

Stack Overflow用户

发布于 2010-11-08 17:57:25

嘿，我不知道你是否还在找答案。几天前，我也有同样的问题，在里面有一个带有PNG图像的div动画。我尝试了许多解决方案，唯一有效的解决方案就是我自己编写的解决方案。

问题似乎是IE缺乏不透明支持和适当的PNG支持，所以在应用不透明效果后，它破坏了PNG的显示(我相信动画框架依赖于AlphaImageLoader过滤器来获得IE的不透明度效果)。奇怪的是(对我来说仍然不太理解)，这个问题可以通过使用相同的过滤器在动画之前加载图像来解决。

我编写了一个简单的javascript，它将过滤器应用于每个具有.PNG扩展的图像。我的动画在IE上运行的很好。

我复制下面的代码。我认为框架是独立的(它是纯JavaScript)，但是您必须将它放在框架的DOM就绪事件中(或者像我一样使用domready.js )。

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

请让我知道，如果你工作良好，如果动画运行顺利。亲切的问候！

票数 20

Stack Overflow用户

发布于 2011-06-13 12:37:11

HTML

   <img src="image.png" class="iefix" width="16" height="16" />

在CSS中

.iefix
{
 /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

简单，快，好:)

票数 7

Stack Overflow用户

发布于 2011-02-09 15:20:41

问题的根本原因似乎是Micrsoft IE对PNG alpha-透明性(在任何版本的IE中)的支持都很差。到目前为止，IE6是最严重的违法者，将α透明像素呈现为浅蓝色。IE7和IE8处理PNG透明度，但不能处理更改PNG中透明像素的透明度--它们呈现为黑色而不是透明。

我自己对此的解决办法取决于情况。以下是一些方法：

用GIF就行了。GIF不会显示为光滑(因为有限的颜色深度)，但像素是完全透明的。
使用这里可用的IE修复程序：http://git.twinhelix.com/cgit/iepngfix/ --打开index.html并阅读注释。
动画运动，但不动画不透明的PNG图像。
有条件地使用JavaScript测试、条件注释或仅对CSS的“行为”扩展来执行上述任何或全部操作。以下是其中任何一种可能的工作方式：

有条件的评论：

<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->

在css中：

/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }

通过JavaScript检测：

<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>

iepngfix.htc行为的工作方式是将PNG替换为空白映像(blank.gif)，然后使用微软的DXImageTransform例程将PNG作为空白图像的筛选器加载。还有其他的PNG修补程序，它们可以用div或span包装东西，但它们经常会破坏您的布局，所以我避免使用它们。

希望这能有所帮助。

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1204457

复制

相似问题

问如何解决IE8中衰落的半透明PNG错误？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解决IE8中衰落的半透明PNG错误？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解决IE8中衰落的半透明PNG错误？
EN