Как добиться того, чтобы прозрачность PNG работала в браузерах, которые ее не поддерживают?

Наш (любимый) дизайнер продолжает создавать файлы PNG с прозрачным фоном для использования в наших приложениях. Я хотел бы убедиться, что эта функция PNG работает и в «старых» браузерах. Какое лучшее решение?

правки ниже

@mabwi & @syd - Неважно, согласен ли я с использованием PNG. Это проблема, которую мне нужно решить!

@ Тим Салливан - IE7.js выглядит довольно круто, но я не думаю, что хочу вносить все остальные изменения в приложение. Мне нужно решение, которое решает исключительно проблему с PNG. Спасибо за ссылку.

Ответов (11)

IE7.js будет поддерживать PNG (включая прозрачность) в IE6.

Я могу ошибаться, но я почти уверен, что IE6 и менее просто не обеспечивают прозрачность с файлами PNG.

У меня есть два "решения", которые я использую. Либо создавайте файлы GIF с прозрачностью и используйте их везде, либо просто используйте их для IE 6 и старше с условными таблицами стилей. Второй действительно работает, только если вы используете их в качестве фона и т. Д.

Я считаю, что все браузеры поддерживают PNG-8. Это не альфа-наложение, но у него есть прозрачный фон.

Я нашел здесь очень хорошее решение: Unit Interactive -> Labs -> Unit PNG Fix

update Unit PNG также включен в список опций исправления PNG на NETTUTS

Вот основные моменты с их веб-сайта:

  • Очень компактный JavaScript: менее 1 КБ!
  • Устраняет некоторые проблемы с интерактивностью, вызванные атрибутом IE filter.
  • Работает с объектами img и атрибутами фонового изображения.
  • Запускается автоматически. Вам не нужно определять классы или вызывать функции.
  • Позволяет использовать элементы с автоматической шириной и автоматической высотой.
  • Очень просто развернуть.

Я могу ошибаться, но я почти уверен, что IE6 и менее просто не обеспечивают прозрачность с файлами PNG.

Вы вроде как есть, а вы как бы нет.

IE6 не поддерживает их.

Однако IE поддерживает безумные пользовательские объекты javascript / css и COM (именно так они изначально реализовали XmlHttpRequest).

Все эти хаки в основном делают следующее:

  • Найдите все изображения png
  • Используйте фильтр изображений DirectX, чтобы загрузить их и создать прозрачное изображение в каком-то формате, который понимает IE.
  • Замените изображения отфильтрованной копией.

Я напортачил с попыткой создать сайт с .png, и это того не стоит. Сайт становится медленным, и вы используете хаки, которые не работают на 100%. Вот хорошая статья о некоторых вариантах , но я советую найти способ заставить работать гифки до тех пор, пока вам не придется поддерживать IE6. Или просто дайте IE6 деградировать.

Использование PNG в IE6 едва ли сложнее, чем в любом другом браузере. Вы можете поддерживать все это в своем CSS без Javascript. Я видел этот хак раньше ...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

Я не уверен, что это правильный CSS, но в зависимости от сайта это может не иметь большого значения.

(стоит отметить, что URL-адрес первого изображения основан на каталоге таблицы стилей, а второй основан на каталоге просматриваемой страницы - поэтому они не совпадают)

@Hboss

все в порядке, если вы точно знаете все файлы (и размеры каждого из них), которые собираетесь отображать - поддерживать этот файл CSS было бы королевской болью, но я полагаю, что это было бы возможно. Когда вы хотите начать использовать прозрачные PNG для некоторых очень распространенных целей: а) случайная графика, такая как значки (возможно, разного размера), которые работают на любом фоне, и б) повторяющиеся фоны; тогда ты облажался. Каждый обходной путь, который я пробовал, в какой-то момент наталкивался на камень преткновения (невозможно выделить текст, когда фон прозрачный, иногда изображения отображаются в дурацких размерах и т. Д. И т. Д.), И я обнаружил, что для максимальной надежности я ' Придется вернуться к гифкам.

Мой совет - попробовать взломать прозрачность PNG, но в то же время осознавать, что он определенно не идеален - и просто помните, вы отклоняетесь назад для пользователей браузера, которому более 7 лет . Что я делаю сейчас, так это показываю пользователям IE6 всплывающее окно при их первом посещении сайта с дружеским напоминанием о том, что их браузер устарел и не предлагает функций, требуемых современными веб-сайтами, и, хотя мы постараемся сделать все, чтобы дайте вам лучшее, вы получите больше удовольствия от работы с нашим сайтом и в Интернете в целом, если вы ОБНОВЛЕНИЕ BLOODY WELL.

  • IE PNG Fix 2.0, который поддерживает background-positionи -repeat!

Также существуют палитры 8-битных PNG с полной альфа-прозрачностью , вопреки тому, во что Photoshop и GIMP могут заставить вас поверить, и они лучше ухудшаются в IE6 - он просто снижает прозрачность до 1 бит. Используйте pngquant для создания таких файлов из 24-битных PNG.

Одна вещь, о которой стоит подумать, - это почтовые клиенты. Вы часто хотите прозрачность PNG-24, но в Outlook 2003 с машиной, использующей IE6. Почтовые клиенты не допускают уловок CSS или JS.

Вот хороший способ справиться с этим. http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Если вы экспортируете изображения в формате PNG-8 из Fireworks, они будут действовать так же, как изображения в формате GIF. Таким образом, они не будут выглядеть дерьмовыми и серыми, прозрачность будет прозрачностью, но у них не будет полной 24-битной красоты, как в других браузерах.

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