PNG-24, проблема отображения в IE. Как исправить?
До тех пор, пока IE 6 версии и ниже не уйдет из обихода пользователей, нам предстоит решать проблему отображения png-24 в браузере. Это актуально хотя бы потому, что, согласно статистике, больше 50% посетителей используют до сих пор эксплорер, в связи с чем не принимать их во внимание будет глупо и непредусмотрительно. Как минимум это приведет к потере посетителей, не сумевших оценить ваш дизайн и использование в нем png.
Делюсь своими решениями данной проблемы.
1. Фильтр или JS. В этом случае рекомендую прочитать статью “PNG-прозрачность в IE 5.5-6″ на tigir.com
Возможно, вы обойдетесь всего лишь одной строчкой:
{
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) можно взять здесь - webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
3. И наконец - столь любимый и популярным jQuery. Здесь еще проще: идем на jquery.andreaseberhard.de/pngFix/, берем 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!!! способа решения проблемы. При проблемы-то бы и не было, откажись Microsoft от поддержки IE6. Да полбеды, если бы только микрософт, надо чтобы и все популярные сайты перестали поддерживать это убожество, называемое браузером. Большая часть времени у хороших верстальщиков уходит на том, чтобы подбирать хаки под IE, в то время как Лиса, Опера, Хром и Сафари спокойно пережевываю СSS3 и HTML5.
На самом деле даже странно, что по это поводу еще не сочиняют юмористические стихи, полные сарказма. Ведь это так свой естественно для русского народа - смеяться над проблемой, которую трудно решить (ну а что еще остается делать, не плакать же). А что - я бы с радостью посмотрела какой-нибудь пародийный ролик, высмеивающий IE6, ну или послушала песенку) Может у кого есть примеры?
3 апреля 2009 в 19:13
Попробовала сделать по 1-му и 3-му методам, не получилось что-то ничего, в итоге
[Ответить]
3 апреля 2009 в 20:49
Странно… Все тестировались. А третий буквально месяц назад еще при верстке использовался. Если найду где выложено - дам ссылки.
[Ответить]
24 февраля 2010 в 13:20
В третем примере все здорово но почему-то начинает скакать текст =( Причем весь который еьс на странице? Может дашь совет как поправить?
[Ответить]
ArtShok:
февраля 24, 2010 в 14:38
У меня текст не скакал, так что надо посмотреть код.
[Ответить]