从外部加载时jQuery淡入IE Png问题
我正在使用jQuery中的加载内容方法将我域中的外部html文件中的数据加载到我的网页上的div中。 我把div从新页面中删除，同时将div隐藏在当前页面中，将其淡出并淡出新的。在这两个div中都有一个png图像，它在IE中创建可怕的黑色斑点，工作正常在其他浏览器中但由于IE无法处理多个filter而导致混乱。
我尝试使用单元png修复无济于事，有没有人有任何修复或想法来帮助我保持我的png在这个过渡期间看起来很好看？
i46.tinypic.com/t9dtvr.jpg这是问题的截图，干杯
还发现原始页面上的png（在加载任何新内容之前）使用单元png修复完美地淡入和淡出但是加载的内容然后从外部文件中退出并不是。 我已经将修复程序添加到这些页面，但这也不起作用。
这个问题没有100％的解决方案。 如果您有PNG的半透明区域，则应用的任何滤镜都会使这些区域完全不透明。 我见过的大多数渐变过渡在淡入淡出过程中应用filter，然后删除filter。 这意味着您将在图像淡入时看到别名区域，但在过渡结束时看起来会很好。
另一种解决方案可用于静态页面的部分：如果图像背后的背景是静态的，您可以从该背景创建图像并将其用作img标记的背景图像。 然后，淡入和淡出将工作得很好。 如果png图像已经是元素的背景图像，则需要将其放在具有不透明背景图像集的容器中，并将其淡化。
如果你在文本或动态内容面前褪色，那么你无能为力。
编辑：以下页面似乎有一个解决方案涉及旧的AlphaImageLoaderfilter和一个不透明度filter集的父div：
我有一个类似的问题，用透明的png背景淡化元素。 经过一些研究后，我找到了这个页面，最后你会找到一个解决方案，这对我有所帮助：
用户dan.tello在IE中使用了额外的filter（CSS）：
.item img { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */ zoom: 1; } 编辑：我发帖说这是绝望的，但实际上有些人描述了解决方法。 看看这是否有帮助：
http://groups.google.com/group/jquery-dev/browse_thread/thread/1f693c5f4e8ea650/f3bc9685ccb40e70?pli=1 http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx
我遇到了类似的问题。 我需要根据用户输入将几个透明PNG中的一个加载到我的页面中，并让它淡入。我最终使用了Drew Diller的Belated PNG修复程序（用于IE6）。 当然，调用文档就不适用于动态内容，所以这就是我的脚本的样子：
html = '
'; $('#overlay').html(html); DD_belatedPNG.fix('#overlay img'); $('#overlay img').hide().fadeIn(1200);
它在IE7中运行良好，但我还没有测试过IE8。
你能给png图像（或褪色的元素）一个透明以外的background-color值吗？ 这主要是帮助。
@jdln – 我不确定这是不是她的意思并解释错了，或者这是另一种解决方案，但这对我有用：
- 将透明PNG应用于包装元素
- 将淡入淡出应用于包装器内的元素。 这似乎也迫使包装元素显示出来。
- 隐藏包装器元素，使用jQuery淡入淡出显示内容元素
例如：
/* HTML: */ I use this for a drop-down menu with a transparent PNG shadow for lte IE8 browsers /* CSS */ #wrapper{margin-left:-9999px;} /* jQuery */ $('#content').hide().fadeIn();
我使用.hide（）来确保效果每次从头开始，因为我是从hover事件中调用它。 希望这有帮助！
你要做的就是在元素周围做出包装（样式）（#outer（有背景png））在js文件中将不透明度淡化为1.0。 效果很好！
例如：
js文件：
$('#style').fadeIn('slow');
css文件：
#style { margin:0; background:transparent; float:left; }