jquery循环IE7透明png问题

Posted 2023-05-08

技术标签:

【中文标题】jquery循环IE7透明png问题【英文标题】：jquery cycle IE7 transparent png problem 【发布时间】：2010-11-12 12:30:31 【问题描述】：

当我在 IE7 中有透明 png 文件时，我无法让 jquery 循环工作

在 Firefox 和 Chrome 中很好，但在 IE（版本 7）中我得到黑色 png 透明度在淡入淡出期间。

这可以正常工作吗？

【问题讨论】：

【参考方案1】：

不幸的是，虽然 IE7 支持透明 PNG，但一次只能对一个元素应用一个过滤器。

您的应用程序中发生的情况是 IE7 正在将 alpha 过滤器应用于您的 PNG，然后 jQuery 要求您为淡化应用另一个 alpha 过滤器。正如你所说，这有明显的结果。

解决这个问题的方法是将你的 png 嵌套在一个容器中，然后淡化容器。有点像这样：

<div id="fadeMe">
    <img src="transparent.png"  />
</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 可能有同样的问题。如果我错了，请纠正我:)

【讨论】：

如果可以的话，我会给这个大大超过 +1。是的，看来IE8也有这个问题你试过 dd_belatedPng (dillerdesign.com/experiment/DD_belatedPNG) 吗？它使用 VML 并且应该使用淡入淡出（例如 filter:alpha(opacity=n)); 我也可以确认这是IE8的问题，以防万一还有人有疑问。太棒了，你太棒了。【参考方案2】：

这几天让我发疯了！终于找到了一个不错的解决方案。

将此添加到您的 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;

信用：Dan Tello

【讨论】：

我测试了其他几个修复程序，发现它们使 IE 变慢了，而这个速度非常快这对我在 IE8 上非常有用——我没有在 IE7 上测试过。该线程中的其他解决方案在我的情况下不起作用。谢谢！到目前为止唯一对我有用的修复方法！谢谢！【参考方案3】：

尝试添加

cleartype: true, cleartypeNoBg: true

到你的循环 jquery 参数。现在应该没问题了:)

【讨论】：

对我们来说，这在图像正在转换时不起作用。黑色在褪色过程中出现，然后消失。这结合使用 png8 在 IE7 上对我有效，但在 IE8 上无效 - 与 rjmunro 一样，我在转换过程中会看到黑色细边框。这为我节省了在 JQuery Cycle 中使用一般 html 幻灯片的时间。非常感谢！为什么这不是最好的答案是我无法理解的。这就是问题的解决方案。【参考方案4】：

再加上前面提到的“将图像包裹在 div 中/淡化 div”策略，使用这行 CSS 将修复 IE 问题：

#div 图像过滤器：progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png');

【讨论】：

【参考方案5】：

对我来说，只需在 jQuery 的 .animate() 函数中包含具有空白值的过滤器属性就可以了

也许这对你也有用。

$("#btn").animate(opacity:1,"margin-left":"-25px", filter:'');

【讨论】：

这只是一起禁用动画，但修复了图像问题。对我来说很好的解决方案:)【参考方案6】：

Internet Explorer 7 存在一些问题带有褪色的透明PNG。如果您已访问此页面，因为您会看到黑色边框 PNG中的透明边缘是，那么这里有一些修复的技巧问题：

不要直接淡化元素，而是淡化一个父容器拿着PNG。这可能意味着你需要添加一个包装元素到您的代码。给父元素一个背景色。最后，如果您仍然遇到问题，请尝试提供您的父元素旧的zoom: 1 把戏。给父元素的样式声明 zoom: 1（通过 CSS 或内联样式。）这将迫使 IE 给出元素hasLayout——倾向于修复各种奇怪的显示问题 IE。

来源：Fading a 24-bit transparent PNG in IE7+

不幸的是，这意味着透明 PNG 不可能在透明背景上淡入淡出，因为您必须为父元素应用背景颜色才能使过渡顺利进行，即没有黑色像素。 background: transparent 不起作用（因为 transparent 不是真正的颜色）。 :(

【讨论】：

【参考方案7】：

我正在将一些 png 动态加载到 DOM 中...这对我有用：http://www.twinhelix.com/css/iepngfix/

【讨论】：

【参考方案8】：

我在使用透明 PNG 上的淡入淡出过渡时遇到了 Drupal Views Slideshow 的问题。

我完全偶然地偶然发现了以下准解决方案。我不知道它为什么起作用，但缺点是它基本上消除了 IE 中的交叉淡入淡出信封（它似乎不会明显影响 FF 或 Safari）：

Views Slideshow 将打印如下内容作为其输出的一部分：

<div class="views-field-field-photo-fid">
   <span class="field-content"><img   src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784"  class="imagefield imagefield-field_photo"></span>
</div>

我隐藏了views-field-field-photo-fid：

.views-field-field-photo-fid  width: 0px;

并不完美，但在我找到更好的解决方案之前可能已经足够好了。大家可以看看开发站：http://acupuncture2.polishyourimage.com/

【讨论】：

【参考方案9】：

我也在使用 Weezy 的解决方案，但与 IE7 不兼容。效果更差。

当将 jQuery opacity-property 分配给 animate-function 而不是 Black-Border-Bug 时，它会生成一个 Black&White-Border-Bug :-P 所以我为 IE8 做了以下操作；

在头部 IE8 条件注释中带有 HTC 行为的 .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="工具提示" class="fixpng"]

必须在 CSS 中将 $(div#tooltip).css(opacity: 0) 更改为 display:none 并在悬停事件中设置 display: 'block'。

因此，如果有人找到适用于 IE7 的有效解决方案，我将非常高兴。上面的所有解决方法/hacks 对我都不起作用。关于 IE6 我什么都不在乎。

【讨论】：

【参考方案10】：

好的，所以我接受了有关 div 的 Darko Z 建议。最后，这是我必须做的才能让 jQuery Cycler 淡入淡出的 FX 在 IE 上与 drupal 7 一起工作。我没有放置标签，而是使用 div 并将 .png 与一起应用于图像的背景p>

所以我改变了这个：

<div class="fademe">
  <a href="http://mysite/node/1">
    <img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png"   />
 </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。

希望对你有帮助，迪戈

【讨论】：

【参考方案11】：

当使用淡入淡出或其他 jQuery 效果时，我已经为这个该死的 IE-PNG-BlackBorderProblem 找到了终极解决方案。即使在 IE8 中，它也适用于每个 IE > 6！：

下载 jQuery 的 pngFix，地址为：http://jquery.andreaseberhard.de/pngFix/

通过搜索修改此脚本： if (jQuery.browser.msie && (ie55 || ie6)) 并将其替换为： if (jQuery.browser.msie)

创建一个空白.gif（1x1 透明 gif）

输入： .pngFix( blankgif: '< relative location to the blank.gif >' ); 在执行 jQuery 效果的行的末尾，例如。 $('#LOGO').animate( 'top': '40%', 'opacity': '1.0', 2500 ).pngFix( blankgif: './library/img/blank.gif' );

在你的文档就绪函数中使用 jQuery 效果之前，请确保所有图片都已加载，方法是使用窗口 DOM-Element 上的 .load 事件：

$(document).ready( function() $(window).load( function() $('#LOGO').animate( 'top': '40%', 'opacity': '1.0', 2500).pngFix( blankgif: './library/img/blank.gif' );););

在 IE8 中加载页面并感到高兴 ;-)

您可以在 http://www.claudworks.net 上看到它的实际效果

在 IE 中，一些动画 PNG 周围不再有丑陋的黑色边框。

【讨论】：

【参考方案12】：

我找到了解决这个错误的方法，只需将以下内容添加到包装 div 以及 img 和其他元素（例如 h1、h2、p）

#div, #div img     
    background:none !important; 
    filter:none !important;

这会解决它

【讨论】：

如果你不错过!。也不需要背景属性。【参考方案13】：

这让我发疯了几天，我终于偶然发现了 Unit 的 PNG 修复程序。 http://labs.unitinteractive.com/unitpngfix.php - 使用 Cycle 并阻止我切换到 JPEG 解决方案！

需要对循环 div 中的特定 PNG 进行一些修改，但她可以工作！

【讨论】：

【参考方案14】：

希望帮助遇到此问题的其他人：

我的页面上的一些 div 上有透明的 .png 背景（平铺），当我激活 jquery 循环插件时，这些透明区域变得扭曲。他们失去了一些透明度。

我的解决方案是简单地使瓷砖更大，所以根本没有瓷砖。文件大小有一个小的折衷，但它解决了问题。

【讨论】：

【参考方案15】：

我重写了fadeIn 和fadeOut 方法。看来我在 PNG 图像上没有得到黑色。不需要父 div。你仍然使用 jQuery。

http://www.pagecolumn.com/javascript/fade.htm

【讨论】：

【参考方案16】：

如果您可以牺牲一点图像质量，您可以将图像保存为 PNG-8 而不是 PNG-24，然后应用 Prosini 提到的修复，即

cleartype: true, cleartypeNoBg: true

这应该可行。使用 PNG-24 时，我在转换过程中仍然会出现一些黑色边框。

【讨论】：

【参考方案17】：

虽然不特别限于循环插件，但这可能对其他人有所帮助。我在尝试找到 .animate() 透明/半透明 png 文件的解决方案时遇到了这个流。我遇到了在 IE7 和 IE8 中都出现黑色边框的问题。在我尝试使用 JQuery 为不透明度设置动画之前，这些图像看起来很好......

$('#my-png-img').stop().animate(opacity:0.0,3000);

我尝试了许多解决方案，但不幸的是，没有一个是理想的。虽然这个流有点过时，但它可能会帮助其他仍在寻找拼凑解决方案的人。我最终使用了 Twin Helix 解决方案 (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)

此外，正如其他人所提到的，我必须将我的图像嵌套在一个容器中......

<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>

然后我将 .animate() 效果应用于包含的 div。然而，有点限制，这是我能够让褪色持续工作的唯一方法。在一种情况下，我什至发现透明度问题影响了对透明 .gif 文件的不透明度进行动画处理。哦，我是否使用 .fadeIn()/.fadeOut 而不是 .animate() 没有区别。

【讨论】：

这对我不起作用。我的图像是通过 css 背景属性应用的，所以我不能将它们“包装”在 div 中。 FWIW、.fadeIn() 和 .fadeOut() 只是在 jQuery 内部调用 .animate() 函数。【参考方案18】：

这都是你被要求做的非常忙碌的事情。都非常编码codingsky。

这是我的建议。 IE 将不允许在彩色背景之上的 png 背景和平相处，就像这样......

    <div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;">&nbsp;</div>
<div style="background-color:#fa0237; position:absolute; z-index:1;">&nbsp;</div>

注意第一个 div 是 z-index 2（在第二个 div 的顶部）。

这可以通过将您的 bgColor 放在第一个 div 的背景 css 中并取消第二个 div 来简化。这解决了黑色区域的问题。我自己也遇到过这个问题。

我可以看到您遇到无法使用此方法的问题的唯一方法是您需要将两个 png 背景图像相互叠加并同时淡化。不要那样做。您需要一个接一个地制作动画。

【讨论】：

【参考方案19】：

为图像定义纯色背景色： .container img 背景颜色：白色；

background-image

src

$('.container img').each(function() $(this).css('背景图片', $(this).attr('src')); );

优势：您无需更改标记

缺点：有时应用纯色背景颜色不是可接受的解决方案。通常是给我的。

【讨论】：

【参考方案20】：

要解决这个问题，只需添加：

“过滤器”：“”

添加到您的 .css() 或 .animate() 中，它将修复一些与 IE 相关的问题。

【讨论】：

【参考方案21】：

最可靠的解决方案是在<IE9 浏览器中的淡入淡出风格动画中不使用 png。我尝试了几乎所有“修复”和可用的修复变体，我可以为这个问题找到并且没有成功。我使用的解决方案是将要应用淡入淡出风格动画（即淡入/淡出）的 png 导出为 gif，并有条件地替换 <IE9。尽管 gif 在现代浏览器中看起来不如 png，但它们看起来比 IE8 和早期渲染 png 的方式要好得多，而且这种方法工作可靠。您仍然可以为功能强大的浏览器显示漂亮的 png，并且当应用修复时，其他任何东西都不会被破坏；众所周知，大多数 png hack 会破坏其他 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
          );

【讨论】：

【参考方案22】：

Weezy's solution 为我工作！

我进一步调整了 .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，因此不需要此脚本来针对它们运行。

【讨论】：

【参考方案23】：

最好的解决方法是unitpngfix。

将其包含在您的脚本中，并确保提供 1px x 1px 透明 gif 的路径。瞧！

【讨论】：

以上是关于jquery循环IE7透明png问题的主要内容，如果未能解决你的问题，请参考以下文章

在使用PNG透明和不透明时，ie7和ie8中的盈余而不是透明

我用Jquery Png后a:hover背景图依旧不透明！

由于 z-index 导致的 jQuery 悬停问题

悬停时动画不透明度（jQuery）

jQuery 循环动画每次都会暂停。如何避免停顿？

如何修复此脚本中的 IE ClearType + jQuery 不透明度问题？