IE8中带有透明图像的jQuery淡入/淡出错误答案

【问题标题】：jQuery fade in/out bug with transparent images in IE8IE8中带有透明图像的jQuery淡入/淡出错误
【发布时间】：2011-09-05 04:00:14
【问题描述】：

在过去的 4 个小时里，我一直在尝试为透明图像实现所有 IE8 修复。不幸的是，它们都不起作用。

这是测试网址：http://www.bluegrassbackingtracks.com/stage/

您可以看到，当您在 IE8 中滚动图标时，图像添加了黑色边框。

我将非常感谢任何可以帮助我们的人。

【问题讨论】：

标签： jquery internet-explorer internet-explorer-8 png

【解决方案1】：

这个问题似乎更多是关于 jQuery 和 IE 的淡入/淡出透明度问题。

查看此内容以供参考：jquery IE Fadein and Fadeout Opacity

为了帮助 IE，如果您可以将图像放在 div 内并将淡入淡出应用到 div 上，那么您应该会得到您想要的效果。将淡入淡出应用于背景图像时可能会出现透明度问题。

试试这样的东西。您还需要稍微调整一下 jQuery。

<ul class="img_list">
    <li class="image_two">
        <a href="category.php?id=2">
            <div class="overlay"><img src="images/buttontwo-overlay.png" alt="" width="136" height="176" /></div>
            <img src="images/buttontwo.png" alt="" width="136" height="176" />
        </a>
    </li>
</ul>

【讨论】：

我想贴出代码，但是好像字符太多了。我已经进行了这些更新。在调整 css 之前，我想看看透明覆盖 png 文件是如何反应的。似乎它们仍然显示黑色边框？
嘿，杰森……你很亲密！使用您的 css，包括 .overlay{opacity:0} 并取出 jQuery 对“过滤器”的调整 - 这可能会触发透明度问题。
嘿蓝！谢谢你回到我身旁。我将 .overlay{opacity:0} 添加到我的 css 中，然后从 jquery 中删除了过滤器。不确定那是诀窍。 bluegrassbackingtracks.com/stage

【解决方案2】：

那个网站有很多代码要处理，如果你能把相关的代码贴在这里，就更容易看出问题所在了。

到那时，这可能会解决您的问题：

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

把它放在$(function () {}); 中，它应该为每个图像添加过滤器，这样不透明度就不会弄乱并产生黑色。

如果这不起作用，请查看：jquery cycle IE7 transparent png problem。

【讨论】：

【解决方案3】：

为您的图像定义纯色背景色：

.container img { 背景颜色：白色； }

将图像的 background-image css 属性定义为它的 src 属性：

$('.holder-thumbs li a img').each(function() { $(this).css('背景图片', $(this).attr('src')); });

优势：您无需更改标记

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

【讨论】：

您已就其他几个问题逐字发布此答案。请考虑至少对其进行调整以适应问题的确切上下文，更详细地显示问题作者出错的地方，并可能提出其他建议。
那是因为我在发布问题之前花了几个小时试图找到有关该主题的信息。因此，当我找到解决方案时，我将其发布在您提到的所有问题中，因为我尝试了所有这些问题，但都没有奏效。