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

Question

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

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

Answer 1

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

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

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

Answer 2

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

• DD_belatedPNG от Drew Diller : использует решение на основе VML, а не фильтр AlphaImageLoader.
• PNGPong : решение на основе Flash

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

Answer 3

Другим способом решения этой проблемы является использование 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.

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

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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