Проблемы IE6 с прозрачными PNG

Суть в том, что если вам нужна альфа-прозрачность в PNG, и вы хотите, чтобы она работала в IE6, вам необходимо применить фильтр AlphaImageLoader.

Теперь есть множество способов сделать это: хаки для конкретного браузера, условные комментарии, итерация элементов Javascript / JQuery / JLibraryOfChoice, обслуживание CSS на стороне сервера через сниффинг UserAgent ...

Но все они сводятся к применению фильтра и удалению фона.

Обычное решение для элементов img - изменить src так, чтобы он указывал на прозрачный GIF размером 1x1 пиксель, а затем использовать тот же хак с фильтром.

Скорее всего, это «лучший» способ. Но имейте в виду, что IE6 неправильно реализует не только альфа-трансляцию, когда дело касается файлов PNG; цветовое пространство повреждено из-за того, что IE не реализует гамму должным образом, и поэтому файлы PNG часто выглядят «темнее», чем должны. Одним из альтернативных «решений», которые мы реализовали в недавнем проекте, было пометить каждое изображение png классом «toGif», в CSS которого вызывается настраиваемое поведение .htc, которое изменяет расширение .png на .gif, если браузер обнаружен как проблема, которую мы отметили как проблему. Мы просто включаем GIF-версию каждого PNG рядом с ним в один и тот же путь, и если обнаруживается, что браузер не обрабатывает PNG должным образом, он заменяет его версией изображения в формате GIF. Поэтому мы жертвуем альфа-смешиванием в пользу гарантированной полной прозрачности и точности цветопередачи и делаем это только тогда, когда знаем, что это, вероятно, не будет выглядеть правильно как есть. Возможно, это не идеальное решение, но я полагаю, что это природа кроссбраузерности. Обновлено: на самом деле теперь, когда я смотрю на рассматриваемый проект, мы использовали поведение .htc для класса img под названием «alpha», который автоматически подбрасывает правильный фильтр на изображение. Итак, вы обнаруживаете браузер с помощью javascript вместо взлома чистого CSS только для IE6, поэтому он может быть немного более элегантным ... но в основном это то же самое. Чтобы получить представление о том, как писать поведения DHTML, попробуйте эта ссылка.

Вот конкретное решение, которое мне нравится, с использованием Javascript (jQuery):

http://jquery.andreaseberhard.de/pngFix/

Его легко добавить на существующий сайт, он обрабатывает всевозможные изображения (кнопки форм, фоны, обычные теги IMG и т. д.) И оставляет ваш CSS красивым и чистым.

Загрузчик изображений - единственное доступное исправление для IE6. Обратите внимание, что поддержка PNG очень элементарна (как и IE7) и не может правильно обрабатывать зацикленный прозрачный фон. Я усвоил это на собственном горьком опыте, когда пытался создать веб-сайт с прозрачным контейнером. Конечно, отлично работает в Firefox.

Исправление должно быть в порядке для небольших областей фона и любой прозрачной графики переднего плана, но я снова не советовал бы разрабатывать веб-сайт, который использует большое количество прозрачности с Internet Explorer.

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

Другой способ обойти это - использовать 2 отдельных изображения, например, GIF и прозрачный PNG, и соответственно настроить таргетинг на CSS:

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE 6 не поддерживает дочерние селекторы CSS, поэтому игнорирует правило, тогда как браузеры, которые его понимают, предоставят вам красивый прозрачный PNG.

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

Вот 2 варианта, в которых не используется фильтр AlphaImageLoader.

• DD_belatedPNG Дрю Диллер: использует решение на основе VML, а не фильтр AlphaImageLoader.
• PNG понг: решение на основе Flash

Для меня, если отправить матовый .gif только в IE6 невозможно, я использую Fireworks для добавления палитры, совместимой с IE6, в .PNG.