Суть проблемы

Как известно, IE 6 не поддерживает альфа-канал (т.е. полупрозрачность) в PNG. Обычно для правильной обработки PNG применяются фильтры на основе AlphaImageLoader. Однако, этот метод обладает рядом серьёзных недостатков, начиная от плохой поддержки CSS и заканчивая сильными «тормозами» при отрисовке и изменениях размеров страницы.

Решение

На наше счастье, не так давно появился новый метод, основанный на VML. За счет конвертирования PNG в вектор удалось добиться великолепных результатов. Основные достоинства:

  • быстрая обработка, которая производится только один раз при загрузке страницы;
  • полная поддержка CSS: background-image, background-position, background-repeat, z-index и псевдокласса :hover;
  • небольшой размер (~5Kb);
  • простота использования.

Подробнее об использовании

На странице проекта DD_belatedPNG всё подробно описано, правда по-английски, поэтому объясню основные моменты. И так, для того, чтобы использовать хак, нужно скачать библиотеку и поместить её в папку вашего проекта.

Затем, нужно добавить в шапку на каждой странице, где применяется PNG, следующий код: 

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Теперь нужно изменить путь к библиотеке DD_belatedPNG.js на тот, который используется в вашем проекте. Кроме того, вместо значения .png_bg нужно перечислить через запятую все CSS селекторы, с которыми используются PNG-файлы (если вы не понимаете о чём я, настоятельно рекомендую ознакомиться со спецификацией CSS). Особо ленивые могут просто вписать туда универсальный селектор * (звёздочка). Правда, это несколько замедлит обработку.

Подводные камни

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

a:hover {
    background: url("img.png") 0 0 no-repeat;
}

Проблема была в том, что изображение img.png не обрабатывалось, в то время как в других местах всё работало отлично. Оказалось, что img.png загружается не вместе со страницей, а позже, при активации псевдокласса, т.е. при наведении курсора на ссылку. Из-за этого библиотека «забывала» его обрабатывать.

Решается этот досадный недочет следующим образом. Везде, где возможно, нужно использовать спрайты. Если же для ссылки предусмотрено только одно фоновое изображение, воспользуйтесь «псевдоспрайтом», который позволит загрузить и обработать изображение, а потом использовать его, как задумывалось. Взгляните на пример, я думаю, вы быстро поймете что к чему.

a {
    background: url("img.png") -9999px 0 no-repeat;
}
a:hover {
    background: url("img.png") 0 0 no-repeat;
}

Возможно, в скором времени этот недочёт будет устранён, следите за обновлениями.

Источник

Сам я узнал об этом методе в блоге rmcreative.ru.