IE показывает черную рамку вокруг PNG, когда исчез

Вот мой сайт: http://smartpeopletalkfast.co.uk/ppr6/

У меня есть PNG с прозрачностью Fadein с JQuery. IE8 (еще не проверенный другими) показывает черные границы вокруг PNG, пока они исчезают. Я знаю, что это признанная проблема, и я попробовал несколько методов без удачи.

Однако я заметил, что сердце (последнее загружаемое изображение) не имеет черных границ. Почему это хорошо? Надеюсь, если я выясню, почему я могу использовать это, чтобы исправить другие.

Спасибо

ОБНОВИТЬ

Я так много играл с кодом, что даже не осознавал, что непреднамеренно отключил появление сердца, поэтому границ нет.

Это странная проблема. На всех форумах, на которых я смотрел, есть решения, которые, похоже, работают для некоторых людей, но не для других.

Источник

5 ответов

Решение

Использование PNG-8 сработало для меня. Это небольшая белая граница с изображением, которое в реальном файле не является проблемой браузера, но в моем случае это выглядит нормально.

Источник

Я знаю, что эта ветка очень старая, в любом случае, я нашел этот пост, который отлично работал для меня, он полностью удаляет черные границы из PNG в IE7, IE8.

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */ 
}

Вы можете найти его в этой теме http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

Источник

Добавить этот атрибут в свой тег, как это

<img src="/someimage.png" alt="yourImageDesc" style="border-style: none" />
Источник

Поставить цвет фона

background: #E1AE07;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -khtml-opacity: 0.50;
    -moz-opacity: 0.50;
    opacity: 0.50;
Источник

У меня была та же проблема установки непрозрачности элемента с помощью jquery, как в $('div').css('opactiy',0.5); я смог исправить это, установив сплошной цвет фона для 'div' в озабоченности.

простая демонстрация: http://jsfiddle.net/mwXs3/3/ (сравните это в Firefox и ie8)...

Источник
Другие вопросы по тегам