jQuery jquery循环IE7透明png问题

jquery cycle IE7 transparent png problem

提问by Darko Z

I'm having trouble getting jquery cycle to work when I have transparent png files in IE7

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

It's fine in Firefox and Chrome but in IE (version 7) I get a black colour where the png transparency is during the fade.

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

Can this be made to work right?

这可以正常工作吗？

回答by Darko Z

unfortunately, though IE7 supports transparent PNG's, only one filter can be applied to an element at a time.

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

What is happening in your application is that IE7 is applying the alpha filter to your PNG, and is then asked by jQuery to apply another alpha filter for the fade. This has visible results like you said.

您的应用程序中发生的情况是 IE7 将 alpha 过滤器应用于您的 PNG，然后 jQuery 要求应用另一个 alpha 过滤器进行淡入淡出。这有你说的可见结果。

The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:

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

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

Another way to get around this is this simple jQuery plugin that i used because i couldn't change the structure. I would give attribution but I honestly cant remember where i found it.

解决这个问题的另一种方法是我使用的这个简单的 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);

NOTEOriginally the plugin was written to fix PNG transparency in IE6 but I modified it to work with your problem in IE6+.

注意最初该插件是为修复 IE6 中的 PNG 透明度而编写的，但我对其进行了修改以解决您在 IE6+ 中的问题。

Sidenote: I cant remember off the top of my head but i think that IE8 may have the same problem. Correct me if i'm wrong :)

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

回答by Chris

This has been driving me mad for the last few days! Finally found a decent solution that works pretty well.

这几天一直让我发疯！终于找到了一个不错的解决方案，效果很好。

Add this to your CSS:

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

Credit: Dan Tello

信用：丹特洛

回答by Chris

Try adding

尝试添加

cleartype: true, cleartypeNoBg: true

cleartype: true, cleartypeNoBg: true

to your cycle jquery arugments. It should be fine now :)

到您的循环 jquery arugments。现在应该没问题了:)

回答by user413366

Coupled with the "wrap the image in a div / fade the div" tactic previously mentioned, using this line of CSS will fix the IE issue:

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

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

回答by Tim Dikun

For me it worked to just include the filter property with blank value in jQuery's .animate()function

对我来说，它只是在 jQuery 的 .animate() 函数中包含带有空白值的过滤器属性

Maybe this will work for you, too.

也许这对你也有用。

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

回答by PolishYourImage

I had this problem with Drupal Views Slideshow using the Fade transition on transparent PNGs.

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

I stumbled across the following quasi-solution totally by chance. I don't know why it works, but the drawback is it essentially removes the cross-fade envelope in IE (it doesn't appear to visibly affect FF or Safari):

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

Views Slideshow will print something like the following as part of its output:

视图幻灯片将打印如下内容作为其输出的一部分：

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

I hid views-field-field-photo-fid:

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

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

Not perfect but maybe good enough till I find a better solution. You can take a look at the development site: http://acupuncture2.polishyourimage.com/

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

回答by PolishYourImage

I've got the ultimate solution for this damn IE-PNG-BlackBorderProblem when using fading or other jQuery effects. It is working in every IE > 6 even in IE8!:

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

1. Download jQuery's pngFix at: http://jquery.andreaseberhard.de/pngFix/

2. Modify this script by searching: if (jQuery.browser.msie && (ie55 || ie6)) {and replace it with: if (jQuery.browser.msie) {

3. create a blank.gif (1x1 transparent gif)

4. put a: .pngFix( {blankgif: '< relative location to the blank.gif >'} );at the end of the line where you perform jQuery effects eg. $('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );

5. make sure that all pictures have been loaded before you use jQuery effects within your document ready function by using the .load event on the window DOM-Element:

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

6. Load page in IE8 and feel happy ;-)

7. You can see it in action on http://www.claudworks.net

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

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

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

4. 将 a: .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上看到它的运行情况

No ugly dark borders anymore around some animated PNGs in IE.

IE 中的一些动画 PNG 周围不再有难看的黑色边框。

回答by Mathias Bynens

Internet Explorer 7 has some issues with fading transparent PNGs. If you've gotten to the this page because you're seeing a black border where the transparent edges in your PNG are, then here are some tips for fixing the problem:

1. Do not fade the element directly, but fade a parent container holding the PNG. This may mean you need to add a wrapper element to your code.
2. Give the parent element a background color.
3. Lastly, if you're still having problems, try giving your parent element the old zoom: 1trick. Give the parent element a style declaration of zoom: 1(either via CSS or an inline style.) This will force IE to give the element hasLayout—which tends to fix all sorts of weird display issues in IE.

Internet Explorer 7 在透明 PNG 褪色方面存在一些问题。如果您访问此页面是因为看到 PNG 中透明边缘所在的黑色边框，那么这里有一些解决问题的提示：

1. 不要直接淡化元素，而是淡化包含 PNG 的父容器。这可能意味着您需要在代码中添加一个包装元素。
2. 给父元素一个背景颜色。
3. 最后，如果您仍然遇到问题，请尝试为您的父元素使用旧zoom: 1技巧。给父元素一个样式声明 zoom: 1（通过 CSS 或内联样式。）这将强制 IE 给元素hasLayout- 这往往会解决 IE 中各种奇怪的显示问题。

Source:Fading a 24-bit transparent PNG in IE7+

来源：在 IE7+ 中淡入淡出 24 位透明 PNG

Unfortunately, this means that it's impossible to have transparent PNGs fading in over a transparent background, since you have to apply a background color to the parent element in order for the transition to go smoothly, i.e. without the black pixels. background: transparentwon't work (since transparentisn't really a color). :(

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

回答by sitth

I'm loading some png's dynamically into the DOM... this worked for me: http://www.twinhelix.com/css/iepngfix/

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

回答by myradon

I'm also using Weezy's solution but doesn't play nice with IE7. The effects is even worse.

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

When assigning jQuery opacity-property to animate-function instead of Black-Border-Bug it generates a Black&White-Border-Bug :-P So I did the following for IE8;

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

In the head IE8 conditional comment with the HTC behavior on class .fixpng especially for htc.

在 IE8 的头部条件注释中，对 .fixpng 类的 HTC 行为特别是对于 HTC。

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

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

changed HTC-file to IE8pngfix.htc. Changed line 75 in the .htc to

将 HTC 文件更改为 IE8pngfix.htc。将 .htc 中的第 75 行更改为

!/MSIE (8)/.test(navigator.userAgent

!/MSIE (8)/.test(navigator.userAgent

It's actually double-filtered, first IE conditional and then in htc, but what the hell!

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

I found that because htc could interfere with jQuery. Example;

我发现这是因为 HTC 可能会干扰 jQuery。例子;

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

Had to change $(div#tooltip).css({opacity: 0}) to display:none in CSS and set display: 'block' in hover-event.

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

So if anybody has found a working solution for IE7 I would be really happy. All the workarounds /hacks above don't work for me. About IE6 I don't care any second.

因此，如果有人找到了适用于 IE7 的可行解决方案，我会非常高兴。上面的所有解决方法/hacks 对我都不起作用。关于 IE6 我一点也不在乎。