Question

我正在使用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 上测试代码时，我在每个图像元素上都有黑色边框，为什么？

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

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

Answer 1

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

Answer 2

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

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

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

2 个答案: