HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

PNG fix ie6 с поддержкой background-position

В этой статье я рассказывал как можно бороться с полупрозрачными пнг в ие6. Но недавно я для себя открыл новый способ борьбы, и, главное, с поддержкой background-position.

В данном способе мы подключаем скрипт, в параметрах функции задаем классы или айдишники элементов, в которых нужно профиксить полупрозрачные png и, вауля, всё работает! Данный скрипт не использует фильтры (!), как все другие стандартные способы, а использует VML (честно говоря, пока не знаю что это), что даёт нам новое видение решение проблемы с полупрозрачными png в ie6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Png fix ie6</title>
<style type="text/css">
body {
	background:url(body.png);
}
.pngBlock1 {
	width:100px;
	height:100px;
	background:url(png24.png);
	border:1px solid #F00;
}
.pngBlock2 {
	width:500px;
	height:200px;
	background:url(png24.png);
	border:1px solid #F00;
}
.pngBlock3 {
	width:500px;
	height:500px;
	background:url(png24.png) repeat-y 200px 0;
	border:1px solid #F00;
}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="ie6fix.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.png24');
</script>
<![endif]-->
</head>
<body>
    <h1>Картинка вставленная через тег img</h1>
    <img src="png24.png" class="png24" alt="" />
 
    <h1>Картинка вставленная фоном</h1>
    <div class="pngBlock1 png24"></div>
 
    <h1>Блок с повторяющимся фоном</h1>
    <div class="pngBlock2 png24"></div>
 
    <h1>Блок с background-repeat</h1>
    <div class="pngBlock3 png24"></div>
</body>
</html>

Скачать пример

Как видите мы для ие6 подключаем скрипт, и в параметрах передаем классы, где нужно пофиксить пнг. Классы или айдишники можно задавать через запятую DD_belatedPNG.fix(‘.png24, #pngfixBlock, .menu’). Скрипт весит всего 7кб. Разработчики скрипта тут: www.dillerdesign.com/experiment/DD_belatedPNG.

Метки: background-position, ie6, png

Запись опубликована 04.09.2009 в 10:21 и размещена в рубрике css, java script. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (13) на “PNG fix ie6 с поддержкой background-position”

Григорий:

26.02.2010 в 23:04

Спасибо за фикс, отлично все работает
Сергей:

22.08.2010 в 12:45

Еее, данный фикс оказался чуть ли не единственным нормально работающий
как с img так и фоном при этом ничего не искажая.
Людмила:

01.09.2010 в 11:18

Спасибо большое за фикс
Андрей:

18.09.2010 в 14:24

1 минута и проблема решена. Спасибо.
Дима:

08.11.2010 в 19:38

НИХУЯ НЕ РАБОТАЕТ!
Аноним:

08.11.2010 в 23:23

Димон, пиздишь, все заебись работает.
Артем:

10.12.2010 в 22:03

спасибо большое за фикс!
banderas:

22.01.2011 в 08:30

У меня пример НЕ РАБОТАЕТ. Картинки вобще не показываются!
Костя:

23.01.2011 в 02:20

Странно, в иетестере работает. Надо будет проверить на настоящем ие6.
Денис:

30.01.2011 в 22:45

Есть такое решение
http://code.google.com/p/ie7-js/
Виталий:

17.02.2011 в 17:36

Использую IE PNG Fix на http://www.zapomninas.ru
Олег:

31.03.2011 в 10:58

Для файлов в формате png24 почему-то не работает. В png8 — всё нормально. В чем может быть причина? этот скрипт не поддерживает такой формат (png24)?
Костя:

31.03.2011 в 12:45

Олег, пнг8 — это как гифка, есть только 2 состояния прозрачности (прозрачно/не прозрачно). В ие6 прозрачность пнг8 и так работает без всяких скриптов. А вот пнг24, это уже другое дело. У меня пример в данной статье работает (внизу еще ссылка на архив). Дайте ссылку где не работает. P.S. В наше время уже можно просто забивать на ие6 и не париться.