Question

我正在使用jquery脚本进行图像翻转，我在IE7中遇到一个问题，只有在我的所有图像都正确加载但是一旦翻转图像并滚出顶部图像的边缘变黑。有没有人知道可能导致这种情况的原因。该网站位于free-to-be-me.com/ask-ava.php。

以下是我正在使用的代码：

    $(function() {
        $(".bw").hover(function() {
            $(this).animate({ opacity: 0.0 }, 200);
        });
    });

    $(function() {
        $(".bw").mouseout(function() {
            $(this).animate({ opacity: 1.0 }, 200);
        });


<div class='liner-nav'>
    <div class='container'>
         <a class='html' href='ava-lb/options.html' style='border:none;' rel='group'><img src='images/ava/School_pink.png' class='bw' style='border:none;' /></a>
         <img src='images/ava/School_blue.png' class='colour' alt='' />
    </div>
</div>
});

提前感谢您的帮助。

修改

我一直在网上搜索几个小时，现在尝试各种不同的黑客试图阻止IE7加入PNG。我得出的结论是，尽管IE7能够以最小的麻烦处理PNG，但它并不能很好地处理不透明度的变化。所以我选择了直接的图像交换，因为它实现了同样的目的。谢谢你的帮助。

Answer 1

所有版本的IE仍然存在应用了不透明度设置的PNG的问题。请参阅this SO question。

Answer 2

我认为你的主要问题是这两个图像的大小略有不同 - 粉红色图像（滚动时出现的图像）是249x89像素，而蓝色图像（下面有什么）是257x97像素。

将这与IE的众所周知的问题与PNG中的不透明度相结合，你会得到你所看到的效果。

我建议您在粉红色图像的左侧和顶部添加一个8像素宽的白色边框，使其与蓝色图像的大小相同。这应该是你想要追求的“按下按钮和粉红色”的样子。

一种方法是使用imageMagick转换工具：

convert -size 257x97 xc:white -page +8+8 School_pink.png -flatten School_pink_wborder.png

但是，您需要运行通过pngquant或类似工具的结果，因为convert不会输出索引的彩色图像，只能输出全彩色。

IE7将翻转图像的边缘变黑

2 个答案: