воскресенье, 23 ноября 2008 г.

Решение проблемы PNG в IE на чистом CSS

Суть проблемы в том, что IE по крайней мере до версии 6 не понимает полупрозрачность изображений формата PNG. Вобщем, кто сталкивался, тот знает.

Вот мой фикс для проблемы PNG в Internet Explorer на чистом CSS

CSS:


/* -- PNG Fix for IE 6 -- */
#rssfeed {
cursor: pointer;
background: none;
/* фильтр применим к IE5+/Win */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='fixed', src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiel0SeNsSu52YwmiAJR-AEnJqpqUDxW-lDI_85mtdf-Cll5zo9pyO32TbT5cC5LYi3eaDiQZ183gVw-5kpDyNlmj3m_3HzQbpr05Wshe1vPSovqYY1Ocwipw6jQiZxJrXUkBgin-3zN6yz/');
}
#rssfeed[id] {
/* [id] применим для нормальных браузеров (не IE) */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiel0SeNsSu52YwmiAJR-AEnJqpqUDxW-lDI_85mtdf-Cll5zo9pyO32TbT5cC5LYi3eaDiQZ183gVw-5kpDyNlmj3m_3HzQbpr05Wshe1vPSovqYY1Ocwipw6jQiZxJrXUkBgin-3zN6yz/) no-repeat;
}
* html #rssfeed a {
/* сделать ссылки интерактивными в IE */
position: relative;
z-index: 999;
}

HTML:


<div id="rssfeed"></div>

Этот прием у меня сработал.

Почему-то многие рекомендуют способ от Komodomedia - CSS PNG Image Fix for IE. Наверное потому, что никто не применял :). У меня их способ не сработал.
Ну и вот еще ссылка на подборочку фиксов для PNG в IE: CSS Hackz Series: PNG Fix for Internet Explorer.

5 Комментариев :

Unknown комментирует...

Меня заинтересовал Ваш блог, давайте дружить :) предлагаю сотрудничество.

Пишу сюда, так как не нашел контакты.

Croaker комментирует...

Без проблем :)

Анонимный комментирует...

у меня не работает. бред какой-то...

Croaker комментирует...

У меня красная иконка RSS в правом верхнем углу экрана сделана как раз с использованием этого фикса. Так что все работает.

Анонимный комментирует...

Все работает, спасибо!

Отправить комментарий

Жги!