Raphäel.js：图像元素在 IE 8 上得到黑色边框，为什么？答案

【问题标题】：Raphäel.js : image element get black border on IE 8, why?Raphäel.js：图像元素在 IE 8 上得到黑色边框，为什么？
【发布时间】：2011-09-09 10:51:12
【问题描述】：

我正在使用Raphäel.js 库。

我有一组 Raphäel 图像元素：

var paper = Raphael(10, 50, 320, 200);

var appleImg = paper.image("apple.png", 10, 10, 30, 30); 
var orangeImg = paper.image("orange.png", 50, 50, 30, 30);
var pearlImg = paper.image("pearl.png", 100, 100, 30, 30);

var imgSet = paper.set();
imgSet.push(appleImg, orangeImg, pearlImg);

正如您在上面看到的，我将所有图像推送到 imgSet 的集合中。

然后，我将鼠标按下事件添加到图像集，如下所示：

imgSet.mousedown(
    function(event) {

        imgSet.attr({opacity: .5});

            }

);

鼠标按下事件处理程序旨在将所有图像更改为 50% 透明。

上面的代码在 Chrome、Firefox 和 Opera 上运行良好。

但是当我在 IE 8 上测试代码时，我在每个图像元素上都有黑色边框，为什么？

（IE 8 上也显示 50% 透明，这很好，但为什么每个图像元素上都有黑色边框？）

附言我想可能是因为图像上 50% 的透明度变化导致了这个 IE 问题，但是在我注释掉 // imgSet.attr({opacity: .5}); 行之后，我仍然在每张图像上都有黑色边框。

【问题讨论】：

能解决这个问题吗？接受的答案中是否真的说明了原因？

标签： javascript dom-events raphael

【解决方案1】：

我猜这是由于带有半透明图像和 alpha 过滤器的 IE 错误：http://solidlystated.com/design/ie-png-black-border-on-hover/

【讨论】：

嗨，即使我没有在鼠标按下事件处理程序中更改图像的透明度，我仍然遇到问题

【解决方案2】：

您是否尝试过禁用 IE 中所有图像的边框？也许它与它的默认样式表有关。

正如您在 Raphael 官方网站上看到的in the demos，旋转图像周围没有边框，尽管它是使用 image 方法生成的，就像您的一样。

【讨论】：