Raphäel.js: элемент изображения получает черную рамку в IE 8, почему?

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, что хорошо, но почему на каждом элементе изображения есть черная рамка?)

приписка Я подумал, может быть, это из-за изменения прозрачности на 50% на изображении, которое вызывает эту проблему IE, но после того, как я закомментировал строку // imgSet.attr({opacity: .5});, я все еще получил черную рамку на каждом изображении.

Answer 1

Полагаю, это связано с ошибкой IE с полупрозрачными изображениями и альфа-фильтром: http://solidlystated.com/design/ie-png-black-border-on-hover/

Answer 2

Вы пробовали отключить границу для всех изображений в IE? Возможно, это как-то связано с таблицей стилей по умолчанию.

Как вы можете видеть в демоверсиях на официальном сайте Raphael, вокруг вращающегося изображения нет границы, хотя оно генерируется с использованием метода image, как и у вас.