Синдикация
PNG-24, проблема отображения в IE. Как исправить?
До тех пор, пока IE 6 версии и ниже не уйдет из обихода пользователей, нам предстоит решать проблему отображения png-24 в браузере. Это актуально хотя бы потому, что, согласно статистике, больше 50% посетителей используют до сих пор эксплорер, в связи с чем не принимать их во внимание будет глупо и непредусмотрительно. Как минимум это приведет к потере посетителей, не сумевших оценить ваш дизайн и использование в нем png.
Делюсь своими решениями данной проблемы.
1. Фильтр или JS. В этом случае рекомендую прочитать статью PNG-прозрачность в IE 5.5-6
Возможно, вы обойдетесь всего лишь одной строчкой:
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='bg.png',sizingMethod='scale');
}
Стиль вы приписываете рисунку. А bg.png - собственно сам рисунок, который фиксите.
2. Второй способ, который уже давно активно применяется - использовать .htc. От вас потребуется только сохранить уже готовый код в виде документа с разрешением .htc (например, iepngfix.htc), туда же на сервер сохранить пустой gif, а в стиле к рисунку пишите:
behavior: url("iepngfix.htc");
Код для htc-Файла можно взять здесь - PNG Behavior
3. И наконец - столь любимый и популярным jQuery. Здесь еще проще: идем на PNG-Transparency for Windows IE 5.5 & 6, скачиваем готовый пример, открываем папку, в корень своего сайта заливаем jquery-latest.pack.js и jquery.pngFix.js (не забываем так же про blank.gif), и вставляем на страницу следующий код:
<head>
...
<script type="text/javascript" src="jquery-latest.pack.js">
</script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
...
</head>
После чего идем отдыхать:)
3 апреля 2009 в 19:13
Попробовала сделать по 1-му и 3-му методам, не получилось что-то ничего, в итоге
[Ответить]
3 апреля 2009 в 20:49
Странно… Все тестировались. А третий буквально месяц назад еще при верстке использовался. Если найду где выложено - дам ссылки.
[Ответить]
24 февраля 2010 в 13:20
В третем примере все здорово но почему-то начинает скакать текст =( Причем весь который еьс на странице? Может дашь совет как поправить?
[Ответить]
ArtShok:
февраля 24, 2010 в 14:38
У меня текст не скакал, так что надо посмотреть код.
[Ответить]