Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом (спасибо dreamhelg за лаконичное описание сути происходящего в данном случае).
Сегодня в в своей RSS-ленте обнаружил ссылку на очередную статью о конфронтации .png и IE. Воспринял ее, пожалуй, как и бóльшая половина удививших заголовок выше — с предубеждением (мол, опять двадцать пять). Тем не менее, выяснилось много интересного. Например, теперь фоновые .png отлично подчиняются свойствам
Сразу же отправлю всех любопытных на страничку с примерами и пояснениями. Реализуется все при помощи JavaScript, который создает и присваивает необходимому элементу страницы <DD_belatedPNG:rect/> (то есть наш .png «перерожденный» в VML).
Вообще, скрипт довольно сырой. Первая проба выпущена всего навсего три дня назад. Посему и дополнительные баги могут появиться и работа скрипта быть более ресурсоемкой, нежели хотелось бы. Тем не менее я думаю, что штука сделанная Дрю Диллером (Drew Diller, так зовут автора скрипта) будет интересна многим, оттого и написал эту кратенькую заметку.
UPD. Выпущена третья версия скрипта в которой исправлены некоторые недоработки. В том числе однопиксельные отступы слева и сверху, появление нежелательноых границ, скролов, а также добавлена возможность передавать функции несколько селекторов через запятую (см. пример кода выше).
Сегодня в в своей RSS-ленте обнаружил ссылку на очередную статью о конфронтации .png и IE. Воспринял ее, пожалуй, как и бóльшая половина удививших заголовок выше — с предубеждением (мол, опять двадцать пять). Тем не менее, выяснилось много интересного. Например, теперь фоновые .png отлично подчиняются свойствам
background-position и background-repeat.Сразу же отправлю всех любопытных на страничку с примерами и пояснениями. Реализуется все при помощи JavaScript, который создает и присваивает необходимому элементу страницы <DD_belatedPNG:rect/> (то есть наш .png «перерожденный» в VML).
Чтобы работало нужно:
- cкачать и подключить к HTML-документу JavaScript (на страничке с примерами есть две ссылки — на обычный и сжатый файлы);
- внутри HTML-документа запустить функцию (DD_belatedPNG.fix()), которой необходимо, в качестве параметра, передать селектор элемента, над которым мы проводим
обрядманипуляцию.
Например:
<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png_bg, .other_class'); //пример подключения классов
</script>
<![endif]-->Что особенного?
- в отличии от других fixов не использует AlphaImageLoader, тем самым не создавая путаницы в порядках слоев (изменения z-index после применения фильтра);
- как сказано выше теперь свойства CSS
background-repeatиbackground-positionработают; - заодно поддерживается доступ к стилю элемента через element.style и работа с псевдо-классом :hover;
- скромный вес скрипта — 4 Кб в сжатом виде.
Недостатки:
- нельзя в качестве селектора указывать
<body>, в связи с ограничениями накладываемыми особенностью присвоения VML тому или иному DOM-узлу; - работа свойства
background-position:fixedне проверялась; будучи скриптом борящимся с «фоновыми» каверзами IE, он не помогает отображать .png полупрозрачным внутри тега;- скрипт не работает пока с элементами таблиц
<tr>и<td>.
Вообще, скрипт довольно сырой. Первая проба выпущена всего навсего три дня назад. Посему и дополнительные баги могут появиться и работа скрипта быть более ресурсоемкой, нежели хотелось бы. Тем не менее я думаю, что штука сделанная Дрю Диллером (Drew Diller, так зовут автора скрипта) будет интересна многим, оттого и написал эту кратенькую заметку.
UPD. Выпущена третья версия скрипта в которой исправлены некоторые недоработки. В том числе однопиксельные отступы слева и сверху, появление нежелательноых границ, скролов, а также добавлена возможность передавать функции несколько селекторов через запятую (см. пример кода выше).
