Решаем проблему отображения полупрозрачных PNG в IE6

Итак, стоит определиться - нужно ли показывать только один PNG как картинку или что-то более?

Для отображения одной единственной картинки я использую вот такой способ:

<!--[if lte IE 6]>
<style type="text/css">
.png {
_behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "/img/0.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
</style>
<![endif]-->

Такой вот код записывается в HEAD, либо уносится в ie6.css (если такой есть в проекте), а когда мы видим картинку в коде, то просто приписываем ей <img src="/path/to/image" class="png" /> и всё.
Зеленым цветом я выделил путь до однопиксельной прозрачной картинки GIF

Данный способ не работает с фоновымии изображениями. Есть кучка библиотек, которые поддерживают фоновые изображения в формате PNG, но не поддерживают background-repeat и background-position...

Библиотека DD_belatedPNG поддерживает всё вышеперечисленное. И, учитывая, что все остальные работают через раз и с ограниченным набором случаев, а эта отрабатывает без сучка и задоринки, то можно назвать её единственной, которая отрабатывает "на все 100"

<!--[if lte IE 6]>
<script src="/path/to/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
DD_belatedPNG.fix('.png');
</script>
<![endif]-->

Думаю, примеры постить бесполезно, пройдитесь по ссылке.

Удачи в работе с устаревшим ПО :)

rss email