Главная » Шпаргалка » PHP MYSQL javascript » лечения проблемы в IE6 с .png

лечения проблемы в IE6 с .png

 

До сих пор достаточно большое количество людей пользуются IE6. Эта "любовь" приводит к тому, что нам приходиться бороться с багами ослика, теряя при этом драгоценное время. В этой статье мы рассмотрим 2 скрипта для лечения известной проблемы в IE6 с .png

 

Скрипт 1: скрипт unitpngfix (страница разработчика)

:Подключается очень просто между тегами <head>:


<!--[if lt IE 7]>
		<script src="unitpngfix.js"></script>  
<![endif]-->

Здесь мы указываем, что скрипт будет подключаться для браузеров IE ниже 7-ой версии. Дополнительно необходимо в папку img положить однопиксельный прозрачный clear.gif.
Недостатки:
Основан на фильтре AlphaImageLoader, возможно изменение z-индексов у слоев, могут возникнуть проблемы с абсолютно спозиционированными блоками, после применения плагина.

Способ 2: скрипт DD_belatedPNG (страница разработчика)
Хотя скрипт еще на стадии альфа (на момент написания статьи 0.0.8а), но позволяет добиться того, что не позволяют сделать нам другие скрипты:
не использует AlphaImageLoader, тем самым не изменения z-index после применения фильтра (лично у меня при использовании этого скрипта не разъехались блоки. как это было при применении unitpngfix), работают свойства CSS background-repeat и background-position. Но вес скрипта 7 килобайт (в сравнении с предыдущим 1.2кб).

Подключение скрипта:

<!--[if lt IE 7]>
	<script src="dd_belatedpng.js"></script>
	<script>
		DD_belatedPNG.fix('.kartinko, #pogoda, #text_bg, #gitara'); 
      // в скобках указываем элементы, к кторым нужно применить скрипт, используя 
      // css - селекторы. 
     // Также возможно привязка скрипта к элементам через HTMLDomElement
     //  DD_belatedPNG.fixPng( someNode )
	</script>
<![endif]-->

Недостатки тоже имеются:
скрипт пока не работает с элементами таблиц <tr> и <td>;
нельзя в качестве селектора указывать body;
интерактивные элементы могут некорректно работать при применении opacity-фильтра

Ну а теперь от слов к примерам (примеры необходимо просматриваить в IE6).
unitpngfix
DD_belatedPNG (в примере 1 образец пары без применения скрипта, 2 - с применением)

Обратите внимание на то, как в первом примере в самом низу растянулась картинка (гитара). которая была задана в background. Это говорит о том, что не работает свойство background-repeat. В сравнении таже гитара во второй демке "репитится" как положено.

Плагинов существует множество, большинство из них работают аналогично unitpngfix с применением фильтра AlphaImageLoader и однопиксельным gif, поэтому их все рассматривать не имеет смысла. Приведенные в обзоре скрипты являются самостоятельными (работают без доп. библиотек).
На сегодня урок закончен. Спасибо за внимание.