JQuery цикл IE7 прозрачной PNG проблема - PullRequest
46 голосов
/ 21 июля 2009

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

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

Можно ли сделать так, чтобы это работало правильно?

Ответы [ 23 ]

56 голосов
/ 21 июля 2009

к сожалению, хотя 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 может иметь ту же проблему. Поправь меня, если я ошибаюсь:)

15 голосов
/ 15 декабря 2010

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

Добавьте это к своему 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;
}

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

13 голосов
/ 06 августа 2009

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

cleartype: true, cleartypeNoBg: true

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

4 голосов
/ 06 августа 2010

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

#div img {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png'); 
}
2 голосов
/ 25 января 2011

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

Может быть, это будет работать и для вас.

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});
1 голос
/ 18 июня 2011

Я также использую решение 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 # tooltip) .css ({opacity: 0}), чтобы отобразить: none в CSS, и установить display: 'block' в hover-event.

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

1 голос
/ 22 июля 2011

Хорошо, поэтому я принял предложение Darko Z о div. В конце концов, это то, что мне нужно было сделать, чтобы заставить jQuery Cycler fadeing FX работать на IE с drupal 7. Вместо размещения тега я использовал div и применил.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

1 голос
/ 17 декабря 2010

У меня была эта проблема с Drupal Views Slideshow с использованием перехода 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>

Я спрятал поле зрения, поле, фото, фото:

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

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

1 голос
/ 24 августа 2010

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

  1. Скачать jQuery's pngFix по адресу: http://jquery.andreaseberhard.de/pngFix/

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

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

  4. положить: .pngFix( {blankgif: '< relative location to the blank.gif >'} ); в конце строки, где вы выполняете эффекты jQuery, например. $('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );

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

    $(document).ready( function() {
    $(window).load( function() {
    $('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500).pngFix( {blankgif: './library/img/blank.gif'} );
    });
    });

  6. Загрузите страницу в IE8 и почувствуйте себя счастливым; -)

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

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

1 голос
/ 12 февраля 2012

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

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

Это исправит

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...