Asp.net jquery循环IE7透明png问题

当我在IE7中有透明的png文件时，我很难让jquery循环正常工作

在Firefox和Chrome中都不错，但在IE（第7版）中，我得到了黑色 png透明度在淡入淡出过程中

---

这能正常工作吗？

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

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

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

<div id="fadeMe">
    <img src="transparent.png" alt="" />
</div>

$(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
          });
      }
}

注意最初编写该插件是为了修复IE6中的PNG透明度，但我修改了它以解决IE6+中的问题

旁注：我记不得了，但我认为IE8可能也有同样的问题。如果我错了，请更正：）

尝试添加

cleartype:true，
cleartypeNoBg:true

到您的循环jquery片段。

---

现在应该没事了：）

这让我疯狂了好几天，最后我偶然发现了该装置的PNG修复程序。-使用Cycle并阻止我切换到JPEG解决方案

---

需要对cycle div中的特定PNG进行一些修补，但她可以工作

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

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

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

Internet Explorer 7有一些问题 与褪色透明PNG。如果 你进入这个页面是因为 你看到一个黑色的边界 PNG中的透明边是， 下面是一些修复问题的技巧 问题:

不要直接淡入元素，而是淡入父容器 举行PNG会议。这可能意味着你 需要将包装器元素添加到 代码

为父元素指定背景色

最后，如果您仍然有问题，请尝试给您的父元素 旧的

缩放：1

技巧。给 父元素的样式声明

缩放：1

（通过CSS或内联 这将迫使IE给出 元素

具有布局

-倾向于修复 各种各样的奇怪的显示问题 即

来源：

---

不幸的是，这意味着不可能让透明PNG在透明背景上淡入，因为必须对父元素应用背景色，以便平滑过渡，即没有黑色像素<代码>背景：透明的不起作用（因为透明的实际上不是一种颜色）（

我正在将一些png动态加载到DOM中……这对我来说很有效：

我重写了fadeIn和fadeOut方法。似乎我没有在png图像上获得黑色。不需要父div。仍然可以用作jQuery

---

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

cleartype: true, cleartypeNoBg: true

---

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

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

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

我研究了许多解决方案，但不幸的是，它们都不理想。虽然这条流有点过时，但它可能会帮助其他人继续寻找拼凑解决方案。我最终使用了双螺旋解决方案（）稍微调整一下。我不太喜欢.htc文件，但这不是重点。我编辑了iepngfix.htc文件（~75行）以捕获IE7和IE8。我更改了

!/MSIE (5\.5|6)/.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>

然后我对包含的div应用了.animate（）效果。但是，有一点约束，这是我能够使淡入一致工作的唯一方法。在一个例子中，我甚至发现透明度问题影响了在透明的.gif文件上设置不透明度的动画。哦，还有，我是否使用了.fadeIn（）/.fadeOut而不是.animate（）没有任何区别。

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

#div img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png'); } #部门经理{ 过滤器：progid:DXImageTransform.Microsoft.AlphaImageLoader（src='../images/bubble_intro_ph1.png'）； } 为我工作

我进一步调整了.htc文件，并更改了这一行：

var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);

致：

通过这样做，.htc脚本将忽略所有.png文件，除非它们以.fixme.png结尾（例如“transparant.fixme.png”）。我打算这样做是为了加快脚本的速度，并确保只有问题.png得到修复（您必须使用transparant）

我使用其他的.png，它们不是透明的，因此不需要这个脚本来运行它们。

最好的修复方法是

---

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

我已经找到了使用淡入淡出或其他jQuery效果时这个该死的IE问题的最终解决方案。它在每一个IE>6甚至IE8中都能正常工作

唐洛

var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);

var bgPNG = bgSrc.match(/url[("']+(.*\.fixme.png[^\)"']*)[\)"']/i);

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;
}

<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 { width: 0px; }

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

    <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>

<!--[if IE 8]>
        <style type="text/css">

               .fixpng { 
                        /* this fixes transparency in IE8 ONLY! */
                        behavior: url(css/IE8pngfix.htc); 
                        }
        </style>
<![endif]-->

[div id="tooltip" class="fixpng"] .container img { background-color: white; } $('.container img').each(function() { $(this).css('background-image', $(this).attr('src')); });

<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>

.fademe{ width:640px; height:330px;}
#TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;}

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

$(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
          });
      }
}