У меня есть следующий логотип, который отображается как тот же цвет фона, что и тело HTML в FF3, Chrome (# 363636).
Но в IE8 он отображает другой, более темный цвет.
Является ли этот FF3/Chrome прощающим мой PNG или просто еще одна ошибка IE (я думал, что они исправили поддержку PNG в IE7)?
Обновить. Я все еще получаю эту проблему, и аргументы pngcrush, которые я использую для ее исправления, следующие:
pngcrush -replace_gamma 0.5181347 infile.png outfile.png
Двоичная ссылка Win32 здесь.
В вашем PNG есть информация о гамма-коррекции (gAMA chunk). Это прекрасно, если вы работаете с фотографиями, где хотите гамма-коррекцию, но это не подходит для Интернета.
В Интернете браузеры обычно не применяют гамма-коррекцию к цветам HTML/CSS или другим изображениям, поэтому, если вы используете гамма-коррекцию, вы получите результаты на вашем PNG, которые не соответствуют остальной части страницы. Некоторые браузеры не используют PNG-гамму именно по этой причине, поэтому вы получаете результаты переменных.
Загрузите логотип в редактор изображений и сохраните его без информации о блоке gAMA. Подробнее.
Самый верный ответ здесь показывает странное reset значение гамма 0.5181347 с использованием pngcrush. Это может работать в некоторых юниверсах, но в нашем случае ваш лучший путь состоит в том, чтобы удалить всю информацию о цветовом пространстве из PNG, чтобы она отображалась исключительно в том же нейтральном пространстве RGB-триплета, которое браузеры используют для цветов в CSS:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png
Что это означает для реальных цветных головок, так это то, что исходный цвет, который вы создали, может не отображаться на другом мониторе или операционной системе, но все ваши цвета с одинаковыми значениями RGB будут отображаться одинаково для каждого пользователя в соответствии с браузер + os они включены. В частности, фоновые или смежные цвета, прилегающие к PNG, будут совпадать, поэтому вы можете проектировать свой сайт с блокировкой изображений и цветов.
Я обсуждал проблему PNG Color в Internet Explorer и ее решение с экранами экрана. Решение состоит в том, чтобы удалить гамма-кусок из изображения PNG (например, с помощью утилиты TweakPNG). Это делает изображения рендерингом в правильных оттенках в Internet Explorer. Некоторые необычные браузеры могут по-прежнему вести себя беспорядочно.
Вам нужно удалить оба блока gAMA и sRGB из вашего PNG. Кроме того, вам необходимо удалить любой цветной/цветной профиль ICC, прикрепленный к изображению.
Photoshop "Сохранить в Интернете" добавляет стандартный профиль ICC sRGB ICC - это отлично подходит для изображений контента, но совершенно неправильно для стилизации изображений, где вам нужно соответствовать цветам CSS.
Это особенно заметно в Safari, о котором у меня есть сообщение .
Я заметил эту проблему во всех IE - 6, 7, 8. Некоторые из изображений PNG имели бы черные контуры вокруг них в прозрачных областях. Оказалось, что мне пришлось открыть Gimp (мой бесплатный редактор кросс-платформенных изображений), открыть PNG, у которого возникла проблема, и использовать инструмент "Нечеткий выбор" на 150%, чтобы повторно выбрать прозрачную область и нажать "Удалить". Затем переустановите. Это обычно разрешало пятно вокруг PNG в прозрачных областях около 98%.
Если это не сработало, перезагрузите в Gimp, установите фон в белый цвет, выберите "Сгладить изображение", установите порог "Нечеткий выбор" на 3%, выберите фон, который вы хотите удалить, выберите "Удалить" ( "Очистить" ), затем повторно выберите еще раз с порогом на 150%, удалите, а затем сохраните изображение.
Примечание по моему инструменту "Нечеткий выбор" мои настройки Gimp были проверены "Сглаживание", снимите флажки "Перо пера", установите флажок "Выбрать прозрачные области", снимите флажок "Скомпилированный образец" и "Выбрать по композиту".
Да, это, похоже, ошибка IE с изображениями PNG, которые имеют прозрачный фон. Ни один из других браузеров - Opera, Safari, Firefox, Chrome - не имеет такой проблемы. Мое подозрение в том, что некоторые графические программы устанавливают 50% прозрачность как часть какого-либо сглаживания на краях, потому что это только те грани, которые имеют проблемы. Я думаю, что браузеры, отличные от IE, обрабатывают 50% прозрачности на пикселе, но IE может понимать только 100% прозрачность на пикселе - просто догадка.
Это единственное решение, которое сработало для меня: http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8
Может быть полезно другим знать, что использование Yahoo Smushit для оптимизации изображений для Интернета исправило эту проблему для меня (и это хорошая идея вообще запускать ваши изображения через это или что-то подобное).