Как исправить проблему с отображением «transparent PNG24 + opacity» в IE8?

Question

[tooq]

Недавно обнаружил вот такую проблему: при установке opacity < 1 для прозрачного изображения, оно некорректно отображается в любимом IE8. Кто-нибудь знает причину этого и как это можно исправить?
Прикладываю скриншот и стили к изображению

element{
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    -khtml-opacity: 0.4;
    -moz-opacity: 0.4;
    opacity: 0.4;
}
element:hover{
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    filter: inherit;	
}

Саму страницу можно увидеть тут: tooq.3eeweb.com/test2

Comments

[Юрий Лобанов]

Автор, куда пропали? Вопрос задали, ответ получили - что нужно сделать?

Answer 1

[Юрий Лобанов]

Вы гуглили? Проблема старая
https://www.google.ru/search?q=ie8+png+bug&start=0...
Пример, проверьте у ie8
codepen.io/iiil/pen/avphD
Правда придется вынести в отдельный файл css, но раз поддерживаете ie8—он у Вас и так должен быть :)

Comments

[tooq]

Я на самом деле перепробовал все это, не получилось. Дело в том, что ie8 не поддерживает отображение png24 к которым применено свойство opacity. Есть выход - использовать png8. Но ie8 опять же не воспринимает изображение, которые отконвертированы в онлайн-сервисах. Зато то что делает фотошоп он понимает, но в фотошопе невозможно данное изображение сохранить в png8 в "нормальном виде", то есть оно сильно отличается, причем в худшую сторону. То есть скорее всего заставить работать это в ie8 нереально..

[Юрий Лобанов]

@tooq Вы конкретно этот пример проверили? О чем Вы говорите, все прекрасно работает в ie8!

[tooq]

@iiil вот скриншот вашего кода goo.gl/XD6YlT (это явно не opacity 40%). А вот в эмуляторе ie8 для ie11 работает, возможно вы так и проверяли

[Юрий Лобанов]

@tooq нет, проверял я в ieTester, и в нем все ок

ieTester

Так уж вышло, что у меня на старом компе до сих пор на двух XP стоит и ie7, и ie8. Я не поленился и запустил. Вот скриншот.

ie8

Для наглядности использовал 10% прозрачность. Вам могу лишь посоветовать проверить версию: я не писал код для ie7 (в ней тоже можно сделать), так как требуется только ie8. Второй вариант - проверьте не на локальном файле, а на локальном сервере или мой пример на codepen.io. Чтобы восьмерка не ругалась, откройте адрес codepen.io/iiil/full/avphD
Кстати, это не единственный способ, но остальные я не проверял. Тема, повторяю, старая.

[tooq]

Хм, действительно, хотя и в ietester я тоже проверял, ну ладно, спасибо большое!

Answer 2

[Александр Таратин]

Попробуйте прогнать картинки через pngquant у него были какие-то параметры для "лучшей" прозрачности в IE