PNG в IE6 — Еще одно решение
Как известно Internet Explorer 6 неправильно отображают файлы формата PNG 24bit. Фон изображения будет отображаться серым. PNG с альфа-каналами позволяет значительно улучшить внешний вид сайта. Проблема конечно же решаема. Пару решений я описывал в аналогичной статье — PNG в IE 6.
Представленные решения неплохие, но есть несколько недостатков, среди которых невозможность «замостить» маленькое изображение.
Решается проблема следующим образом:
1. Скачиваем js, который и будет фиксить эту проблему. Либо отсюда. Распаковываем архив и кидаем в папку с дизайном.
2. В теге <head> документа указываем путь к скачанному скрипту:
<script src="DD_belatedPNG.js"></script>
3. Пишем нужный стиль для элемента (либо в CSS, либо в теге <head> документа, как в примере):
<style type="text/css">
.alpha
{
width:100%;
height:600px;
background:url('file.png');
}
</style>4. Пишем блок и указываем написанный стиль.
<div class="alpha"></div>
Теперь, нужно указать, чтобы данный стиль был обработан скриптом, и проблема с отображением исправилась.
5. Прописываем в <head>:
<script>
DD_belatedPNG.fix('.alpha');
</script>Тем самым, указываем, что данный стиль должен быть обработан скриптом.
Чтобы скрипт выполнялся только в IE 6, советую советую оградить код в 2 и 5 пунктах таким образом:
<!--[if IE 6]> Тут ограждаемый код <![endif]-->
Полный код страницы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PNG</title>
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.alpha');
</script>
<![endif]-->
<style type="text/css">
.alpha
{
width:100%;
height:600px;
background:url('file.png');
}
</style>
</head>
<body>
<div class="alpha"></div>
</body>
</html>Совет
Можно вместо
<script>
DD_belatedPNG.fix('.alpha');
</script>указать так:
<script>
DD_belatedPNG.fix('*');
</script>Тем самым, будет применяться скрипт ко всем стилям.