ИЕ6 проблемы с прозрачных png-изображений


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

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

7 14

7 ответов:

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

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

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

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

Http://jquery.andreaseberhard.de/pngFix/

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

Это, скорее всего," лучший " способ. Но имейте в виду, что это не просто Альфа-Транс, который IE6 не реализует должным образом, когда речь заходит о PNG-файлах; цветовое пространство повреждено из-за того, что IE не реализует гамму должным образом, и поэтому PNG-файлы часто показывают "темнее", чем они должны.
Одно альтернативное "решение", которое мы реализовали в недавнем проекте, состояло в том, чтобы помечать каждое изображение png классом" toGif", в CSS которого пользовательское поведение .htc называется, который изменяет свое .расширение PNG в .gif если обнаружен браузер, который мы отметили как проблему. Мы просто включаем GIF-версию каждого PNG рядом с ним в один и тот же путь, и если браузер не обрабатывает PNGs должным образом, он меняет его на GIF-версию изображения. Поэтому мы жертвуем Альфа-смешиванием в пользу гарантированной полной прозрачности и точности цвета, и только тогда, когда мы знаем, что это, вероятно, не будет выглядеть так, как есть.
Может быть, это и не идеальное решение, но все же ... природа кросс-браузера, я полагаю.
Edit: на самом деле теперь, когда я смотрю на рассматриваемый проект, мы использовали an .поведение htc для класса img под названием "alpha", который автоматически отбрасывает правильный фильтр на изображение. Таким образом, вы обнаруживаете браузер, использующий javascript вместо IE6-только чистый взлом CSS, поэтому он может быть немного более элегантным... но это в основном одно и то же.
Для ознакомления с тем, как писать поведение 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.

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

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