jQuery的周期IE7透明png的问题
当我在IE7中使用透明png文件时，我无法让jquery循环工作
在Firefox和Chrome中是好的，但是在IE（版本7）中，我得到了一个黑色，png透明度在淡出时显示。
这可以使工作正确吗？
不幸的是，虽然IE7支持透明的PNG，但是一次只能对一个元素应用一个filter。
您的应用程序中发生的事情是，IE7正在将alphafilter应用于您的PNG，然后由jQuery请求为淡入淡出应用另一个alphafilter。 这就像你说的那样有明显的结果。
解决这个问题的方法是将你的PNGembedded一个容器中，然后淡化容器。 有点像这样：
<div id="fadeMe"> <img src="transparent.png" alt="" /> </div> 解决这个问题的另一种方法是使用这个简单的jQuery插件，因为我无法更改结构。 我会给归属，但我真的不记得我发现它的地方。
/* IE PNG fix multiple filters */ (function ($) { if (!$) return; $.fn.extend({ fixPNG: function(sizingMethod, forceBG) { if (!($.browser.msie)) return this; var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions) this.each(function() { var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"), imgname = (isImg) ? this.src : this.currentStyle.backgroundImage, src = (isImg) ? imgname : imgname.substring(5,imgname.length-2); this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')"; if (isImg) this.src = emptyimg; else this.style.backgroundImage = "url(" + emptyimg + ")"; }); return this; } }); })(jQuery);
注意最初的插件是为了修复IE6中的PNG透明度而编写的，但是我修改了它以便在IE6 +中处理您的问题。
旁注：我不记得我的头顶，但我认为，IE8可能有同样的问题。 如我错了请纠正我 ：）
这在过去几天一直让我生气！ 最后find一个体面的解决scheme，工作得很好。
添加到您的CSS：
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; }
信用： 丹特洛
尝试添加
cleartype: true, cleartypeNoBg: true
到你的循环jquery arugments。 现在应该没问题了:)
再加上前面提到的“用div /淡入div”包装图像，使用这行CSS将解决IE问题：
#div img {
filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（src ='.. / images / bubble_intro_ph1.png'）;
}
对我来说，它只是在jQuery的.animate（）函数中包含空值的filter属性
也许这也适用于你。
$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});
Internet Explorer 7在褪色透明PNG方面存在一些问题。 如果你已经到了这个页面，因为你看到了PNG中透明边缘的黑色边框，那么下面是一些解决问题的技巧：
- 不要直接淡化元素，而是淡化包含PNG的父容器。 这可能意味着你需要添加一个包装元素到你的代码中。
- 给父元素一个背景颜色。
- 最后，如果你仍然有问题，尝试给你的父母元素旧
zoom: 1把戏。 给父元素一个zoom: 1的样式声明zoom: 1（通过CSS或内联样式）。这将强制IE给元素hasLayout– 这往往会修复在IE中的各种奇怪的显示问题。
来源： 在IE7 +中褪色24位透明PNG
不幸的是，这意味着在透明背景下透明的PNG渐变是不可能的，因为你必须将背景颜色应用到父元素才能平滑过渡，即没有黑色像素。 background: transparent不起作用（因为transparent不是真的是一种颜色）。 🙁
我正在加载一些PNGdynamic到DOM …这工作对我来说： http : //www.twinhelix.com/css/iepngfix/
我在Drupal Views Slideshow上使用了透明PNG上的淡入淡出（Fade transition）来解决这个问题。
我偶然偶然发现了下面的准解决scheme。 我不知道它为什么起作用，但缺点是它基本上消除了IE中的淡入淡出信封（它看起来不会明显影响FF或Safari）：
视图幻灯片将输出如下内容的一部分：
<div class="views-field-field-photo-fid"> <span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span> </div>
我藏了views-field-field-photo-fid：
.views-field-field-photo-fid { width: 0px; }
不完美，但也许够好，直到我find一个更好的解决scheme。 你可以看看发展网站： http : //acupuncture2.polishyourimage.com/
我也使用Weezy的解决scheme，但不能和IE7玩。 效果更糟糕。
当将jQuery opacity-property分配给animate-function而不是black-border-Bug时，它会生成一个黑白边框Bug :-P所以我为IE8做了以下操作：
在IE8的条件注释与macros观行为类.fixpng，特别是对于HTC。
<!--[if IE 8]> <style type="text/css"> .fixpng { /* this fixes transparency in IE8 ONLY! */ behavior: url(css/IE8pngfix.htc); } </style> <![endif]-->
将HTC文件更改为IE8pngfix.htc。 将.htc中的第75行更改为
！/ MSIE（8）/。test（navigator.userAgent
它实际上是双重过滤，首先IE的条件，然后在HTC，但到底是什么！
我发现，因为HTC可能会干扰jQuery。 例;
[div id =“tooltip”class =“fixpng”]
必须改变$（div＃tooltip）.css（{opacity：0}）在CSS中显示：none并且在hover-event中设置display：'block'。
所以如果有人find了IE7的工作解决scheme，我会很高兴。 所有的解决方法/上面的黑客不适用于我。 关于IE6我不在乎任何第二。
好的，所以我拿了Darko Z关于div的build议。 最后，这是我必须做的，以便能够让jQuery Cycler淡出效果在drupal 7上工作在IE上。而不是放置一个标签，我使用了divs，并将the.png应用到图像背景
所以我改变了这个：
<div class="fademe"> <a href="http://mysite/node/1"> <img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" /> </a>
对此：
<a href="http://mysite/node/1"> <div class="fademe" id="TAB1"></div> </a>
然后在CSS我做了：
.fademe{ width:640px; height:330px;} #TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;}
它现在工作= D。
希望它有助于Defigo
当使用淡入淡出或其他jQuery效果时，我已经得到了这个该死的IE-PNG-BlackBorderProblem的终极解决scheme。 它在每个IE> 6甚至在IE8工作！：
-
下载jQuery的pngFix： http : //jquery.andreaseberhard.de/pngFix/
-
通过search修改这个脚本：
if (jQuery.browser.msie && (ie55 || ie6)) {和replace为：if (jQuery.browser.msie) { -
创build一个blank.gif（1×1透明gif）
-
把一个：
.pngFix( {blankgif: '< relative location to the blank.gif >'} );在你执行jQuery效果的那一行的末尾。$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} ); -
在窗口DOM元素上使用.load事件，在文档就绪函数中使用jQuery特效之前，请确保所有图片都已加载：
$(document).ready( function() {
$(window).load( function() {
$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500).pngFix( {blankgif: './library/img/blank.gif'} );
});
}); -
在IE8加载页面，感到高兴;-)
在IE中，一些animationPNG周围没有丑陋的黑色边框。
我发现修复这个bug，只需添加以下到包装div和img和其他元素（如h1，h2，p）
#div, #div img { background:none !important; filter:none !important; }
这将解决它
这让我生气了好几天，终于偶然发现了Unit的PNG修复。 http://labs.unitinteractive.com/unitpngfix.php – 与Cycle一起工作，阻止我切换到JPEG解决scheme！
它需要一些修补程序来定位特定的PNG在循环div，但她的工作！
希望能帮助遇到这个问题的其他人：
我在页面上的几个div上有透明的.png背景（平铺），当我激活jquery循环插件时，那些透明区域变得扭曲。 他们失去了一些透明度。
我的解决办法是简单地使瓷砖更大，所以根本没有瓷砖。 文件大小有一个小小的折衷，但它解决了这个问题。
我重写了fadeIn和fadeOut方法。 看来我没有得到PNG图像上的黑色。 没有父div是必要的。 你仍然使用jQuery。
如果您可以牺牲一点图像质量，您可以将图像保存为PNG-8而不是PNG-24，然后应用Prosini提到的修复，即
cleartype: true, cleartypeNoBg: true
这应该工作。 使用PNG-24，在转换过程中，我仍然有一点黑色边框。
虽然没有具体限制到循环插件，这可能会帮助其他人。 我碰到这个stream，试图find.animate（）透明/半透明的PNG文件的解决scheme。 我遇到了IE7和IE8都出现黑边的问题。 图像显示正常，直到我试图使用JQuery来设置不透明度的animation…
$('#my-png-img').stop().animate({opacity:0.0},3000);
我通过了一些解决scheme，不幸的是，没有一个是理想的。 虽然这个stream有点过时，但可能会帮助其他人仍在search拼凑解决scheme。 我最终使用双螺旋解决scheme（ http://www.twinhelix.com/css/iepngfix/ ）稍微调整了一下。 我不是一个巨大的.htc文件的粉丝，但这是重点。 我编辑了iepngfix.htc文件（〜第75行）来捕获IE7和IE8。 我变了…
!/MSIE (5\.5|6)/.test(navigator.userAgent) ||
至
!/MSIE (5\.5|6|7|8)/.test(navigator.userAgent) ||
从那里我遵循一般的说明（见演示），包括将这个位添加到我的CSS
/* IE PNG Fix */ img, div, a, input { behavior: url(/_css/iepngfix.htc) }
另外，正如其他人所说，我不得不把我的形象embedded一个容器中。
<div id="img-container"><img src="http://img.dovov.commy_semi_trans_png24.png" /></div>
然后，我将.animate（）效果应用于包含div。 然而，有一点限制，这是我能够一直工作的唯一方法。 在一个案例中，我甚至发现透明度问题影响了透明的.gif文件的不透明度。 哦，不pipe我用.fadeIn（）/。fadeOut而不是.animate（）没有什么区别。
这是你被要求做的所有非常紧张的事情。 所有非常编码codingsky。
这是我的build议。 IE浏览器将不允许在彩色背景上面的PNG背景生活在和平，像这样…
<div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;"> </div> <div style="background-color:#fa0237; position:absolute; z-index:1;"> </div>
注意第一个div是z-index 2（在第二个div之上）。
这可以通过将您的bgColor放在第一个div的背景css中并简化第二个div来简化。 这解决了黑区的问题。 我自己有这个问题。
只有这样我才能看到你有一个问题，你不能使用这种方法是你需要叠加两个PNG背景图像，并同时淡出。 不要这样做。 你需要一个又一个地animation每一个。
- 为您的图像定义一个固定的背景颜色：
.container img {
背景颜色：白色;
}
- 将图像的background-image css属性定义为其src属性：
$（'。container img'）。each（function（）{
$（this）.css（'background-image'，$（this）.attr（'src'））;
}）;
优点：你不需要改变你的标记
缺点：有时应用纯色背景色不是一个可接受的解决scheme。 通常是给我的
要解决这个问题，只需添加：
“filter”：“”
到你的.css（）或.animate（），它会修复一些IE相关的问题。
最可靠的解决scheme是在<IE9浏览器中不使用淡入淡出风格animation中的png。
我尝试了几乎所有可以find的问题的解决scheme和修复scheme，但都没有成功。 我使用的解决scheme是导出应用淡入淡出式animation的png（即fadeIn / fadeOut）到gif，并对<IE9进行有条件的replace。 尽pipeGIF在现代浏览器中看起来不如PNG好，但它们看起来比IE8和更早版本的PNG更好，而且这种方法可靠地工作。 你仍然可以显示良好的PNG的有能力的浏览器，当修复应用程序没有其他事情被打破; 大多数PNG黑客都知道打破其他CSS属性。 你的代码可能看起来像这样：
$(document).ready(function () { if ($.browser.msie && parseInt($.browser.version, 10) < 9) { $(".myClass, .myOtherClass").each(function (val) { var backgroundValue = val.css("background-image"); backgroundValue.replace('.png', '.gif'); $(this).css("background-image", backgroundValue); //you could just as easily do this with 'img' tags }); } }
Weezy的解决scheme为我工作！
我进一步调整了.htc文件，并更改了这一行：
var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);
至：
var bgPNG = bgSrc.match(/url[("']+(.*\.fixme.png[^\)"']*)[\)"']/i);
通过这样做，.htc脚本将忽略所有.png文件， 除非以.fixme.png结尾（例如“transparant.fixme.png”）。 我打算加快脚本的速度，并确保只有问题.png是固定的（你必须有透明的）。
我使用其他不透明的.png，因此不需要这个脚本来对付它们。
最好的解决办法是unitpngfix 。
将其包含在您的脚本中，并确保提供1px乘1px透明gif的path。 瞧！
