Блог FX’а

IE6 очень плохо работает с изображениями в PNG-формате, которые имеют альфа-канал (проще говоря, прозрачность) - он просто не учитывается. Решить проблему довольно просто, самый удобный вариант - воспользоваться “библиотекой” jQuery.ifixpng, которая сделает всё за вас. Единственный недостаток (хотя, кому как) - зависимость от jQuery. Тем, кто пользуется другими библиотеками, в частности, PrototypeJS (а именно она по умолчанию используется в таких фреймворках как RubyOnRails и Symfony), воспользоваться этой “библиотекой” не получится. Именно для них я и попытался переписать эту библиотеку.

Prototype.Browser.Version = (navigator.userAgent.toLowerCase().match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1];
Prototype.FixPNG = { Pixel: 'images/pixel.gif' };

Element.addMethods({
  fixpng: (Prototype.Browser.IE && Prototype.Browser.Version < 7) ? function(element) {
    function fixPosition(element) { if(element.style.position != 'absolute') element.style.position == 'relative'; }
    function filter(src) { return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='" + src + "')"; }
    var elementName = element.nodeName.toLowerCase();
    if(elementName == 'img' || elementName == 'input') {
      if(element.src && element.src.match(/.*\.png([?].*)?$/i)) {
        element.setStyle({
          filter: filter(element.src),
          width: element.getWidth(),
          height: element.getHeight()
        });
        element.src = Prototype.FixPNG.Pixel;
        fixPosition(element);
      }
    } else {
      var image = element.currentStyle.backgroundImage;
      if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
        element.setStyle({
          filter: filter(RegExp.$1),
          backgroundImage: "none"
        });
        element.children().each(fixPosition);
      }
    }
  } : function(element) {}
});

Зависимости:

• Библиотека PrototypeJS
• В директории images должен лежать “пустой” файл pixel.gif (его можно взять здесь, или, если вас не устраивает такое расположение файла - просто измените переменную Prototype.FixPNG.Pixel)

Пример использования:

Event.observe(window, 'load', function() {
  $$('.test, #test').each(function(element){ element.fixpng() });
}, false);

PS. Также советую почитать раздел Known Limitations на странице jQuery.ifixpng.

written by FX Poster \\ tags: JavaScript, jQuery, PrototypeJS