Черная рамка PNG8 в IE

У меня проблема в IE с изображениями PNG8, поскольку они отображаются с большой грязной черной рамкой в ​​тени моего *.png. (IE7, IE8)

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

Мне нужно изображение «прозрачное», потому что оно появляется поверх множества разноцветных фонов и т. Д.?

Любые идеи?


css png internet-explorer-8 internet-explorer-7 internet-explorer-6
person Tom    schedule 14.10.2009    source источник

Ответы (8)


arrow_upward
5
arrow_downward

Я вынужден ответить. Я только что решил и эту проблему. Напомним, что в IE7 и IE 8 прозрачные изображения PNG и GIF в ссылках иногда имеют черную рамку или тень вокруг них.

Вам нужно убедиться, что на этих изображениях нет фильтров непрозрачности. У меня непрозрачность 100. Я изменил это на

filter:0;

Помните также, что для размытого текста ссылки вам необходимо указать цвет фона для ссылки, иначе она будет нечеткой и размытой.

Смерть ИИ!!

person Jason    schedule 25.09.2010

arrow_upward
3
arrow_downward

Хочу сказать спасибо за ответ и кое-что добавить. В моем конкретном случае мне нужно было переопределить стиль, который был:

filter: alpha(opacity=50);

Добавление приведенного ниже кода сделало мою непрозрачность правильной, но добавило проблему с черными краями:

filter: alpha(opacity=100);

Это строка, которая спасла меня, исправив проблему:

filter: 0;

Я надеюсь, что это поможет кому-то еще!

person Jamie    schedule 17.08.2010
comment
Кто-нибудь может объяснить, почему это происходит с IE7? Кажется, исправление работает, и это здорово (спасибо!), но я хотел бы понять это на более глубоком уровне, на случай, если в будущем я столкнусь с ситуацией, когда я не могу просто выполнить filter: 0. (И в общем, чтобы удовлетворить свое любопытство.) - person Jess Jacobs; 27.01.2011

arrow_upward
3
arrow_downward

ОК - проблема решена. Казалось, что мой JS присваивал

filter: alpha(opacity=100);

к изображению, и именно это вызывало появление черной метки, поскольку я уже сделал изображение альфа-прозрачным в кодировке PNG8.

person Tom    schedule 14.10.2009

arrow_upward
1
arrow_downward

Я страдал от подобных проблем с непрозрачностью в ie7, ie8, что вы можете сделать, это дать вашему изображению png background color, которое удалит уродливые границы с изображения... Это работает для меня

person halocursed    schedule 14.10.2009
comment
эй, спасибо, но что, если мне нужен прозрачный фон? то есть он появляется поверх других изображений на моем сайте, поэтому невозможно сказать, какой цвет фона .... - person Tom; 14.10.2009

arrow_upward
1
arrow_downward

Это сработало для меня с анимированными непрозрачностями:

img{
    background: transparent; 
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); 
    zoom: 1;
}
person TomTheMeatBomb    schedule 09.11.2011

arrow_upward
1
arrow_downward

После поиска альтернативных решений я вернулся к исходным изображениям за ответами.

Кажется, что 24-битные .png-файлы вызывают проблемы, но 8-битные версии ведут себя хорошо. Я не исследовал это глубоко.

Эти настройки в диалоговом окне Photoshop «Сохранить для Интернета и устройств» помогли мне избавиться от черных штрихов в анимации непрозрачности:

PNG-8, выборочный, диффузный, прозрачный, цветов: 256, матовый: нет, без прозрачности, дизеринг, чересстрочная развертка и преобразование в sRGB с помощью «Internet Standard RGB».

person Ismo Vuorinen    schedule 21.12.2011

arrow_upward
1
arrow_downward

Вы можете сделать это в CSS, используя собственную систему фильтрации IE.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

ДЕМО

вам нужно будет использовать пустой.gif для «первого» изображения в объявлении фона. Это просто для того, чтобы запутать ie8 и не дать ему использовать как фильтр, так и фон, который вы установили, и использовать только фильтр. Другие браузеры поддерживают несколько фоновых изображений и понимают объявление фона, но не понимают фильтр, поэтому используют только фон.

Вам также может понадобиться поиграть с sizingMethod в фильтре, чтобы заставить его работать так, как вы хотите.

person Fresheyeball    schedule 08.08.2012

arrow_upward
0
arrow_downward

То же самое произошло с PNG с прозрачностью, который был установлен в качестве фонового изображения элемента ‹A› с примененной непрозрачностью.

Исправление заключалось в том, чтобы установить цвет фона элемента ‹A›.

Итак, следующее:

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

Превращается в:

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF; 

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
person Josh Mouch    schedule 17.05.2012