Баг с прозрачностью картинок PNG в IE6. Решения
О существовании бага разработчики браузера «Internet Explorer» признались на официальном сайте в бюллетене: «Не отображается прозрачность в файлах PNG в Internet Explorer». Цитируем с сайта:
При обзоре веб-страницы, содержащей изображение с прозрачным фоном формата Portable Network Graphics (PNG), фон изображения скорее будет отображаться серым, а не прозрачным.
Познакомьтесь с самыми простыми способами устранения этого недостатка.
1 способ. Откажитесь от прозрачности
Проще решения нет. Просто не используйте прозрачность в PNG, и Ваши картинки будет показываться корректно в любом браузере.
На заметку! Недостаток заключается в том, что не всегда можно отказаться от применения прозрачности без ущерба, например, для дизайна сайта. Часто, устранение одной простой проблемы приводит к череде гораздо более сложных и крупных неприятностей.
2 способ. Конвертируйте PNG в формат GIF
Если отказаться от использования прозрачности никак нельзя, то можно попробовать конвертировать изображение в другой подходящий формат.
Прозрачность поддерживают только два формата — PNG и GIF, поэтому рекомендуем пересохранить Ваше изображение в формат GIF. С отображением прозрачности в GIF-файлах проблем в браузере IE6 не наблюдается.
После конвертации файл будет иметь другое расширение, поэтому не забудьте обновить названия картинок в коде сайта.
На заметку! К сожалению, глубина цвета в файлах GIF хуже, чем в PNG, поэтому при конвертировании могут возникнуть неровности и обрывки на краях прозрачности. Не забудьте визуально проверить, достаточно ли качественно всё получилось. Очень часто конвертация сопровождается ухудшением качества изображения.
3 способ. Используйте скрипт jquery.pngFix.js на «jQuery»
Пожалуй, самое красивое решение задачи. Скачайте готовый плугин на «jQuery» с этого сайта. Закачайте его по FTP на свой сайт и пропишите в шаблоне страниц следующий код:
<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> и </head> на всех страницах Вашего сайта. Не забудьте скачать последнюю версию библиотеки «jQuery» (jquery-latest.pack.js) с официального сайта.
Преимущество, описанного выше решения, заключается в том, что Вам не потребуется переконвертировать картинки в другой формат и менять пути к ним в шаблонах своего сайта. Благодаря этому простому коду все ошибки отображения картинок в формате PNG в браузере IE6 будут исправлены.
У данного решения есть один недостаток. Функция «pngFix» вызывается только в момент полной загрузки страницы сайта! Если на странице много картинок или посетитель использует медленное подключение к Интернету, то может наблюдаться интересный эффект:
- Пока страница сайта загружается, картинка PNG будет отображаться с ошибкой прозрачности;
- Как только страница полностью загрузится, например, через 4-7 секунд, то баг сразу же исправляется.
На заметку! Подобный эффект Вы можете наблюдать даже на нашем сайте. Понаблюдайте, как ведёт себя логотип «Ваш МАСТЕР» в шапке сайта при просмотре в браузере IE. Не знаем, как Вас, но нас это всё-таки немножко раздражает.
Мы привели наиболее простые и интересные решения данной проблемы. Для полноты картины, рекомендуем также почитать следующие статьи:
Надеемся, наша статья поможет Вам делать правильные сайты.
Ошибки бывают у всех, даже у «Майкрософт».
Ещё рекомендуем прочитать:
Зачем нужен сайт? Всё о пользе создания своего сайта
Разработчиков сайта Министерства обороны России подозревают в крупных хищениях
Создание простых сайтов
За создание сайта о культурном наследии России обещают 76 млн рублей
За апгрейд сайта госзакупок обещают 26 млн долларов
| К списку статей |
