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

StackOverflow https://stackoverflow.com/questions/130161

Вопрос

Я привык к идее, что если я хочу / нужно использовать PNG с альфа-переводом в кроссбраузерном режиме, я использую фоновое изображение в div, а затем, в CSS только для IE6, отмечаю фон как "нет" и включаю соответствующий аргумент "filter".

Есть ли другой способ?Лучший способ?Есть ли способ сделать это с тегом img, а не с фоновыми изображениями?

Это было полезно?

Решение

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

Сейчас существует множество способов сделать это:Взломы, специфичные для браузера, условные комментарии, итерация элементов Javascript / jQuery /JLibraryOfChoice, обслуживание CSS на стороне сервера с помощью перехвата пользователем-агентом...

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

Другие советы

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

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

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

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

Загрузчик изображений - единственное доступное исправление для 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.

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top