jquery循环IE7透明png问题

时间：2009-07-21 02:13:28

标签： asp.net jquery

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

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

这可以正常工作吗？

23 个答案:

答案 0 :(得分：56)

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

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

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

<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可能有同样的问题。如果我错了，请纠正我：）

答案 1 :(得分：15)

过去几天这让我很生气！终于找到了一个很好用的解决方案。

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

答案 2 :(得分：13)

尝试添加

cleartype: true, cleartypeNoBg: true

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

答案 3 :(得分：4)

再加上前面提到的“将图像包裹在div / fade the div”策略中，使用这一行CSS将解决IE问题：

#div img {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png'); 
}

答案 4 :(得分：2)

对我来说，它只是在jQuery的.animate（）函数中包含带有空值的filter属性

也许这对你也有用。

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

答案 5 :(得分：1)

我找到了修复此错误，只需将以下内容添加到包装div以及img和其他元素（例如h1，h2，p）

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

这将解决它

答案 6 :(得分：1)

  

Internet Explorer 7存在一些问题   使用渐弱的透明PNG。如果   你已经到了这个页面，因为   你看到的是黑色边框   PNG中的透明边缘是，   然后这里有一些修复的技巧   问题：

     
      
  1. 不要直接淡化元素，而是淡化父容器   持有巴布亚新几内亚。这可能意味着你   需要为你的包装添加一个包装元素   代码。
    2.   
  2. 为父元素指定背景颜色。
    3.   
  3. 最后，如果您仍然遇到问题，请尝试提供您的父元素   旧的zoom: 1技巧。给   父元素一个样式声明   zoom: 1（通过CSS或内联   风格。）这将迫使IE给予   元素hasLayout - 往往会修复   各种各样奇怪的显示问题   IE浏览器。
    4.   

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

不幸的是，这意味着透明的PNG在透明背景中消失是不可能的，因为您必须将背景颜色应用于父元素，以便过渡顺利进行，即没有黑色像素。 background: transparent无效（因为transparent并非真正的颜色）。 ：（

答案 7 :(得分：1)

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

答案 8 :(得分：1)

好的，所以我把关于div的Darko Z建议。最后这是我必须要做的就是能够让jQuery Cycler淡化FX在drupal 7上使用IE。而不是放置标签我使用了div并将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

答案 9 :(得分：1)

我也在使用Weezy的解决方案，但与IE7的搭配并不好。效果更糟。

将jQuery opacity-property分配给animate-function而不是Black-Border-Bug时会生成Black＆amp; 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）/。试验（navigator.userAgent的

它实际上是双重过滤的，首先是IE条件，然后是htc，但到底是什么！

我发现因为htc可能会干扰jQuery。实施例; 

  [div id="tooltip" class="fixpng"]

必须更改$（div＃tooltip）.css（{opacity：0}）才能在CSS中显示：none并在hover-event中设置display：'block'。

因此，如果有人找到了IE7的工作解决方案，我会非常高兴。上面的所有变通方法/黑客都不适用于我。关于IE6我什么都不关心。

答案 10 :(得分：1)

当使用淡入淡出或其他jQuery效果时，我已经获得了这个该死的IE-PNG-BlackBorderProblem的终极解决方案。它适用于每个IE＆gt; 6甚至在IE8中！：

  1. 在http://jquery.andreaseberhard.de/pngFix/下载jQuery的pngFix

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

  3. 创建一个blank.gif（1x1透明gif）

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

  5. 通过在窗口DOM-Element上使用.load事件，确保在文档就绪函数中使用jQuery效果之前已加载所有图片：

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

  6. 在IE8中加载页面并感到高兴; - ）

  7. 您可以在http://www.claudworks.net

    8. 上看到它的实际效果

    在IE中的某些动画PNG周围不再出现难看的黑暗边框。

答案 11 :(得分：1)

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

我偶然发现了以下准解决方案。我不知道它为什么会起作用，但缺点是它基本上删除了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; }

不完美但可能足够好直到我找到更好的解决方案。您可以查看开发站点：http://acupuncture2.polishyourimage.com/

答案 12 :(得分：0)

最可靠的解决方案是在<IE9浏览器中不使用pngs来淡化样式动画。

我尝试了几乎每一个“修复”和修复的变体，我可以找到这个问题并且没有成功。我使用的解决方案是将具有应用于它们的渐变式动画（即fadeIn / fadeOut）的png导出为gif并对<IE9进行条件替换。尽管现代浏览器中的GIF看起来不像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
          });
      }
}

答案 13 :(得分：0)

要解决此问题，只需添加：

“过滤器”：“”

到您的.css（）或.animate（），它将解决许多与IE相关的问题。

答案 14 :(得分：0)

  1. 为图片定义纯色背景色：
    2.     .container img {
         background-color: white;
    }
    1. 将图片的 background-image css属性定义为 src 属性：
      2.     $('.container img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

      优点：您无需更改标记

      缺点：有时使用纯色背景并不是一种可接受的解决方案。它通常适合我。

答案 15 :(得分：0)

这是你被要求做的非常繁忙的事情。所有非常编码的codingsky。

这是我的建议。 IE不会允许彩色背景上方的背景生活在和平中，就像这样...... 

    <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背景图像叠加在一起并同时淡出。不要那样做。你需要一个接一个地制作动画。

答案 16 :(得分：0)

最佳解决方案是unitpngfix。

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

答案 17 :(得分：0)

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”）。我打算这样做一点点加快脚本速度，确保只修复问题.pngs（你必须透明）。

我使用不 transparant的其他.png，因此不需要使用此脚本对其进行操作。

答案 18 :(得分：0)

虽然没有特别限制循环插件，但这可能有助于其他人。我试图找到.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（）都没有区别。

答案 19 :(得分：0)

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

cleartype: true, cleartypeNoBg: true

这应该有效。使用PNG-24，在转换期间我仍然会有一些黑色边框。

答案 20 :(得分：0)

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

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

答案 21 :(得分：0)

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

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

我的解决方案是简单地将瓷砖做得更大，所以根本没有平铺。文件大小有一个小小的权衡，但它解决了这个问题。

答案 22 :(得分：0)

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

在循环div中定位特定的PNG需要一点修修补补，但是她有效！

相关问题
最新问题