Question

The site I'm working on以精美的jQuery不透明度动画打开。目前它适用于所有浏览器，但在IE中，所有文本和alpha图像都留有丑陋的黑色边框，使文本几乎不可读。

是否有一些聪明的javascript命令我可以运行来刷新/更新图形？还有其他方法可以解决这个问题吗？

我的问题完全与css和javascript有关，因此可以在链接后找到所有源代码。

感谢您的帮助！

Answer 1

在涉及不透明度的动画之后，您需要清除不透明度值（返回默认值为无值）以修复IE中的这种受损的抗锯齿。在动画完成后（例如在回调中），在相关部分尝试此jQuery：

$('.item').css('filter','');

Answer 2

这个问题可能有你想要的答案：

jquery cycle IE7 transparent png problem

来自@ darkoz的回答：

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

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

Answer 3

在处理IE中的不透明度问题时，这段jQuery代码对我很有帮助。

    $(function() {
        if (jQuery.browser.msie)
            $('img[src$=.png]').each(function() {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
    })

Answer 4

为图片定义纯色背景色：

    .container img {
         background-color: white;
    }

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

    $('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

优点：您无需更改标记

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

为什么在alpha动画之后，IE中的图形会出现丑陋的黑色边框？

4 个答案: