JQuery цикл IE7 прозрачный png проблема

У меня возникли проблемы с запуском цикла jquery, когда у меня есть прозрачные png файлы в IE7

Это прекрасно в Firefox и Chrome, но в IE (версия 7) я получаю черный цвет, прозрачность png во время выцветания.

Можно ли это сделать правильно?

Ответ 1

к сожалению, хотя 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 +.

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

Ответ 2

Это заставило меня с ума в течение последних нескольких дней! Наконец нашел достойное решение, которое работает очень хорошо.

Добавьте это в свой CSS:

img {  
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */
    zoom: 1;
}

Кредит: Дэн Телло

Ответ 3

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

cleartype: true, cleartypeNoBg: true

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

Ответ 4

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

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

Ответ 5

Для меня это просто включило свойство фильтра с пустым значением в функцию jQuery.animate()

Возможно, это тоже сработает для вас.

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

Ответ 6

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

Не выцветать элемент напрямую, а вытеснять родительский контейнер держа PNG. Это может означать, что вы необходимо добавить элемент оболочки к вашему код.

Дайте родительскому элементу цвет фона.

Наконец, если у вас все еще есть проблемы, попробуйте указать свой родительский элемент старый трюк zoom: 1. Дай родительский элемент - декларация стиля zoom: 1 (через CSS или встроенный стиль.) Это заставит IE дать элемент hasLayout, который стремится исправить всевозможные странные проблемы с отображением в IE.

Источник: Увядание 24-битного прозрачного PNG в IE7 +

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

Ответ 7

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

Ответ 8

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

Загрузите jQuery pngFix по адресу: http://jquery.andreaseberhard.de/pngFix/
Измените это script, выполнив поиск: if (jQuery.browser.msie && (ie55 || ie6)) { и замените его на: if (jQuery.browser.msie) {
создать blank.gif(1x1 прозрачный gif)
введите a: .pngFix( {blankgif: '< relative location to the blank.gif >'} ); в конце строки, где вы выполняете эффекты jQuery, например. $('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );
убедитесь, что все изображения были загружены, прежде чем использовать эффекты jQuery в вашей готовой документации, используя событие .load в окне DOM-Element:

$(document).ready( function() {
  $(window).load( function() {
      $('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500).pngFix( {blankgif: './library/img/blank.gif'} );
  });
});
Загрузите страницу в IE8 и почувствуйте себя счастливым; -)
Вы можете увидеть его в действии на http://www.claudworks.net

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

Ответ 9

У меня была эта проблема с показом слайдов Drupal Views с использованием перехода Fade на прозрачные PNG.

Я случайно наткнулся на следующее квазирешение. Я не знаю, почему это работает, но недостатком является то, что он существенно удаляет конверт с перекрестным затуханием в IE (он, по-видимому, явно не влияет на FF или Safari):

В представлении слайд-шоу будет напечатано что-то вроде следующего как часть его вывода:

<div class="views-field-field-photo-fid">
   <span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span>
</div>

Я скрыл view-field-field-photo-fid:

.views-field-field-photo-fid { width: 0px; }

Не идеальный, но, может быть, достаточно хороший, пока я не найду лучшее решение. Вы можете взглянуть на сайт разработки: http://acupuncture2.polishyourimage.com/

Ответ 10

Я также использую решение Weezy, но не играю хорошо с IE7. Эффекты еще хуже.

При назначении jQuery непрозрачности-свойства для функции animate вместо Black-Border-Bug он генерирует Black & White-Border-Bug: -P. Итак, для IE8 я сделал следующее:

В голове IE8 условный комментарий с поведением HTC по классу .fixpng специально для htc.

<!--[if IE 8]>
        <style type="text/css">

               .fixpng { 
                        /* this fixes transparency in IE8 ONLY! */
                        behavior: url(css/IE8pngfix.htc); 
                        }
        </style>
<![endif]-->

изменил HTC файл на IE8pngfix.htc. Изменена строка 75 в .htc на

!/MSIE (8)/. Испытание (navigator.userAgent

На самом деле он дважды фильтруется, сначала IE условный, а затем в htc, но какого черта!

Я обнаружил, что поскольку htc может помешать jQuery. Пример

  [div id="tooltip" class="fixpng"]

Пришлось менять $(подсказка div #).css({opacity: 0}) для отображения: none в CSS и установить отображение: "block" в hover-event.

Итак, если кто-нибудь нашел рабочее решение для IE7, я был бы действительно счастлив. Все обходные пути/хаки выше не работают для меня. О IE6 Мне не все равно.

Ответ 11

Хорошо, поэтому я принял предложение Darko Z о div. В конце концов, это то, что я должен был сделать, чтобы получить jQuery Cycler fadeing FX для работы с IE с drupal 7. Вместо размещения тега я использовал divs и применил the.png к фону изображения вместе с

Итак, я изменил это:

<div class="fademe">
  <a href="http://mysite/node/1">
    <img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" />
 </a>

<a href="http://mysite/node/1">
  <div class="fademe" id="TAB1"></div>
</a>

то в css я сделал:

.fademe{ width:640px; height:330px;}
#TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;}

и он работает сейчас = D.

Надеюсь, что это поможет, Defigo

Ответ 12

Я нашел исправление этой ошибки, просто добавьте следующее в div обертки и в img и другие элементы (например, h1, h2, p)

#div, #div img {    
    background:none !important; 
    filter:none !important;
}

Это исправит его

Ответ 13

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

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

Ответ 14

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

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

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

Ответ 15

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

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

Ответ 16

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

cleartype: true, cleartypeNoBg: true

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

Ответ 17

Хотя это не ограничивается плагином цикла, это может помочь другим. Я столкнулся с этим потоком, пытаясь найти решение для .animate() прозрачных/полупрозрачных png файлов. У меня была проблема с черной границей, имевшей место как в 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(), не имеет значения.

Ответ 18

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

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

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

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

Посредством этого .htc script будет игнорировать все .png файлы , если не закончится с .fixme.png(например, "transparentant.fixme.png" ). Я намеревался это немного ускорить script и убедиться, что исправлены только проблемы .pngs(те, которые у вас должны быть прозрачными).

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

Ответ 19

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

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

Ответ 20

Это все довольно беспокойный материал, который вас просят сделать. Все очень кодирующие кодировки.

Вот мое предложение. IE не позволит фон png над цветным фоном жить в покое, например...

    <div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;">&nbsp;</div>
<div style="background-color:#fa0237; position:absolute; z-index:1;">&nbsp;</div>

Обратите внимание, что первый div - это z-индекс 2 (поверх второго div).

Это можно упростить, поставив ваш bgColor на фоне css в 1-м Div и удалив второй div. Это решает проблему черных областей. У меня была эта проблема.

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

Ответ 21

Определите сплошной цвет фона для вашего изображения:

    .container img {
         background-color: white;
    }

Определите свойство css background-image вашего изображения в атрибуте src:

    $('.container img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

Преимущество: вам не нужно менять свою разметку

Недостаток: иногда применение твердого цвета фона не является приемлемым решением. Обычно это для меня.

Ответ 22

Чтобы решить эту проблему, просто добавьте:

"filter": ""

на ваш .css() или .animate(), и он устранит ряд связанных с IE проблем.

Ответ 23

Самое надежное решение - не использовать png в анимации стирания стиля в браузерах <IE9.

Я пробовал почти все "исправления" и варианты исправлений, которые я мог найти для этой проблемы, и не имел успеха. Решение, которое я использовал, - это экспортировать png, которые будут иметь анимацию стиля затухания, применяемую к ним (например, fadeIn/fadeOut), к gifs и выполнить условную замену для <IE9. Хотя gif не выглядят так же хорошо, как png в современном браузере, они выглядят намного лучше, чем IE8 и более ранние версии png, и этот метод работает надежно. Вы по-прежнему можете отображать красивые png для браузеров, и когда исправление применяется, ничто другое не сломается; Известно, что большинство png-хаков нарушают другие свойства css. Ваш код может выглядеть примерно так:

$(document).ready(function ()
{
      if ($.browser.msie && parseInt($.browser.version, 10) < 9)
      {
          $(".myClass, .myOtherClass").each(function (val)
          {
              var backgroundValue = val.css("background-image");
              backgroundValue.replace('.png', '.gif');
              $(this).css("background-image", backgroundValue);
              //you could just as easily do this with 'img' tags
          });
      }
}