цикл jQuery IE7 прозрачная png проблема

К сожалению, хотя IE7 поддерживает прозрачные PNG, только один фильтр может быть применен к элементу за раз.

В вашем приложении происходит то, что IE7 применяет альфа-фильтр к вашему PNG, а затем jQuery просит применить другой альфа-фильтр для затухания. Как вы и сказали, это дает видимые результаты.

Чтобы обойти это, нужно вложить свой png в контейнер, а затем затемнить контейнер. Примерно так:

<div id="fadeMe">
    <img src="transparent.png" alt="" />
</div>

Другой способ обойти это - это простой плагин jQuery, который я использовал, потому что не мог изменить структуру. Я бы дал указание, но, честно говоря, не могу вспомнить, где я его нашел.

/* IE PNG fix multiple filters */
(function ($) {
    if (!$) return;
    $.fn.extend({
        fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
            this.each(function() {
                var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                    imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                    src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                if (isImg) this.src = emptyimg;
                else this.style.backgroundImage = "url(" + emptyimg + ")";
            });
            return this;
        }
    });
})(jQuery);

ПРИМЕЧАНИЕ Первоначально плагин был написан для исправления прозрачности PNG в IE6, но я изменил его для решения вашей проблемы в IE6 +.

Примечания: Я не могу припомнить, но думаю, что у IE8 может быть такая же проблема. Поправьте меня, если я ошибаюсь :)

Попробуйте добавить

cleartype: true, cleartypeNoBg: true

для вашего цикла jquery-приложений. Теперь все должно быть в порядке :)

Это меня бесило в течение пары дней, и я наконец наткнулся на исправление PNG для Unit. http://labs.unitinteractive.com/unitpngfix.php - работает с Cycle и не дает мне перейти на решение JPEG!

Нужно немного повозиться, чтобы настроить таргетинг на определенные PNG в цикле div, но она работает!

В надежде помочь кому-то еще, кто столкнется с этой проблемой:

У меня был прозрачный фон .png (мозаичный) на нескольких div на моей странице, и когда я активировал плагин цикла jquery, эти прозрачные районы стали шаткими. Они потеряли часть своей прозрачности.

Мое решение заключалось в том, чтобы просто сделать плитки намного больше, чтобы их вообще не было. Есть небольшой компромисс с размером файла, но он устранил проблему.

Internet Explorer 7 имеет некоторые проблемы с исчезающими прозрачными PNG. Если вы попали на эту страницу, потому что вы видите черную рамку, где прозрачные края в вашем PNG, тогда вот несколько советов по исправлению проблема:

1. Не исчезает напрямую, а родительский контейнер. держа PNG. Это может означать вы нужно добавить элемент оболочки к вашему code.
2. Задайте цвет фона родительскому элементу.
3. Наконец, если у вас все еще есть проблемы, попробуйте указать родительскому элементу старый зум: 1 трюк. Дай родительский элемент объявление стиля масштаб: 1 (либо через CSS, либо через встроенный style.) Это заставит IE дать element hasLayout - который имеет тенденцию исправлять всевозможные странные проблемы с отображением в IE.

Источник: Затухание 24-битного прозрачного PNG в IE7 +

К сожалению, это означает, что прозрачные PNG невозможно затухать поверх прозрачного фона, так как вам нужно применить цвет фона к родительскому элементу чтобы переход прошел плавно, т.е. без черных пикселей. фон: прозрачный не будет работать (поскольку прозрачный на самом деле не цвет). : (

Я загружаю некоторые png в DOM динамически ... у меня это сработало: http://www.twinhelix.com/css/iepngfix/

Если вы можете позволить себе немного пожертвовать качеством изображения, вы можете сохранить изображения как PNG-8 вместо PNG-24, затем применить исправление, упомянутое Просини, то есть

cleartype: true, cleartypeNoBg: true

, и это должно сработать. С PNG-24 у меня все еще появлялась небольшая черная рамка во время переходов.

Я переписал методы fadeIn и fadeOut. Кажется, я не получаю черный цвет на PNG изображении. Родительский div не нужен. По-прежнему использую как jQuery.

http://www.pagecolumn.com/javascript/fade.htm

Хотя это не ограничивается конкретно плагином цикла, это может помочь другим. Я наткнулся на этот поток, пытаясь найти решение для прозрачных / полупрозрачных файлов png .animate (). У меня была проблема с черной рамкой как в IE7, так и в IE8. Изображения выглядели нормально, пока я не попытался использовать JQuery для анимации непрозрачности ...

$('#my-png-img').stop().animate({opacity:0.0},3000); 

Я просмотрел несколько решений, и, к сожалению, ни одно из них не было идеальным. Хотя этот поток немного устарел, он может помочь кому-то другому, все еще ищущему решение. В итоге я использовал решение Twin Helix ( http://www.twinhelix.com/css/iepngfix/ ) с небольшой настройкой. Я не большой поклонник файлов .htc, но это не относится к делу. Я отредактировал файл iepngfix.htc (~ строка 75), чтобы перехватить IE7 и IE8. Я изменил ...

!/MSIE (5\.5|6)/.test(navigator.userAgent) ||

на

!/MSIE (5\.5|6|7|8)/.test(navigator.userAgent) ||

Оттуда я выполнил общие инструкции (см. Демонстрацию), включая добавление этого бита в мой CSS

/* IE PNG Fix */
img, div, a, input { 
    behavior: url(/_css/iepngfix.htc) 

} 

Кроме того, как уже упоминалось другими, мне пришлось вложить свое изображение в контейнер ...

<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>

Затем я применил эффект .animate () к содержащему его div. Однако, немного ограничивая, это был единственный способ добиться стабильной работы затухания. В одном случае я даже обнаружил, что проблема с прозрачностью влияет на анимацию непрозрачности прозрачного файла .gif. Да и то, использовал ли я .fadeIn () /. FadeOut, а не .animate (), не имело значения.

В сочетании с ранее упомянутой тактикой "обернуть изображение в div / затухание div", использование этой строки CSS устранит проблему IE:

#div img {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png'); 
}

Решение Weezy у меня сработало!

Я дополнительно изменил файл .htc и изменил эту строку:

var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);

на:

var bgPNG = bgSrc.match(/url[("']+(.*\.fixme.png[^\)"']*)[\)"']/i);

Таким образом, сценарий .htc будет игнорировать все файлы .png , если только они не оканчиваются на .fixme .png (например, transparant.fixme.png). Я намеревался немного ускорить скрипт и убедиться, что исправлены только проблемные .png-файлы (те, которые у вас должны быть прозрачными).

Я использую другие .png, которые не прозрачны, и поэтому мне не нужен этот скрипт для работы с ними.

Лучшее исправление - unitpngfix

Включите его в ваш скрипт и не забудьте указать путь к вашему прозрачному gif размером 1px на 1px. Вуаля!

У меня есть окончательное решение этой проклятой проблемы IE-PNG-BlackBorder при использовании затухания или других эффектов jQuery. Он работает во всех IE > 6, даже в IE8!:

1. Загрузите jQuery pngFix по адресу: http://jquery.andreaseberhard.de/pngFix/

2. Измените этот скрипт, выполнив поиск: if (jQuery.browser.msie && (ie55 || ie6)) { и замените его на: if (jQuery.browser.msie) {

3. создайте пустой.gif (1x1 прозрачный gif)

4. поместите: .pngFix({blankif: '<относительное местоположение по отношению к Blank.gif>'} ); в конце строки, где вы выполняете эффекты jQuery, например. $('#LOGO').animate({'верх': '40%', 'непрозрачность': '1.0'}, 2500).pngFix({blankif: './library/img/blank.gif '} );

5. убедитесь, что все изображения были загружены, прежде чем использовать эффекты jQuery в функции готовности документа, используя событие .load в окне DOM-Element:

   $(document).ready( function( ) {
$(окно).load( function() {
$('#LOGO').animate({'верх': '40%', 'непрозрачность': '1.0'}, 2500).pngFix( {blankif: './library/img/blank.gif'} );
});
});

6. Загрузите страницу в IE8 и наслаждайтесь ;-)

7. Вы можете увидеть ее в действии на http://www.claudworks.net

Больше нет уродливых темных рамок вокруг некоторых анимированные PNG в IE.