jquery Zyklus IE7 transparent png Problem

Ich habe Probleme, jquery Zyklus zu arbeiten, wenn ich transparente png-Dateien in IE7 habe

Es ist in Firefox und Chrome in Ordnung, aber in IE (Version 7) bekomme ich eine schwarze Farbe, wo die Png-Transparenz während der Überblendung ist.

Kann man das richtig machen?

Obwohl IE7 transparente PNGs unterstützt, kann leider immer nur ein Filter auf ein Element angewendet werden.

Was in Ihrer Anwendung passiert, ist, dass IE7 den Alpha-Filter auf Ihr PNG anwendet und dann von jQuery aufgefordert wird, einen weiteren Alpha-Filter für die Fade anzuwenden. Dies hat sichtbare Ergebnisse, wie Sie gesagt haben.

Um dies zu umgehen, musst du dein PNG in einem Container verschachteln und dann den Container ausblenden. So ungefähr:

Eine andere Möglichkeit, dies zu umgehen, ist dieses einfache jQuery-Plugin, das ich verwendet habe, weil ich die Struktur nicht ändern konnte. Ich würde eine Zuschreibung geben, aber ich kann mich ehrlich gesagt nicht erinnern, wo ich sie gefunden habe.

 /* 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); 

HINWEIS Ursprünglich wurde das Plugin geschrieben, um PNG-Transparenz in IE6 zu beheben, aber ich habe es so modifiziert, dass es mit Ihrem Problem in IE6 + funktioniert.

Randnotiz: Ich kann mich nicht von ganzem Herzen erinnern, aber ich denke, IE8 könnte das gleiche Problem haben. Korrigiere mich, wenn ich falsch liege 🙂

Das hat mich die letzten paar Tage verrückt gemacht! Endlich eine vernünftige Lösung gefunden, die ziemlich gut funktioniert.

Fügen Sie dies Ihrem CSS hinzu:

 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; } 

Kredit: Dan Tello

Versuche es hinzuzufügen

cleartype: true, cleartypeNoBg: true

zu deinem Zyklus jquery rugues. Es sollte jetzt gut sein 🙂

Zusammen mit der bereits erwähnten “drap / fade the div” -Taktik wird das IE-Problem mit dieser CSS-Zeile behoben:

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

Für mich funktionierte es, nur die Filtereigenschaft mit leerem Wert in jQuery’s .animate () – function aufzunehmen

Vielleicht wird das auch für dich funktionieren.

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

Internet Explorer 7 hat einige Probleme mit dem Ausblenden von transparenten PNGs. Wenn Sie diese Seite aufgerufen haben, weil Sie einen schwarzen Rahmen mit den transparenten Kanten in Ihrem PNG sehen, finden Sie hier einige Tipps zur Behebung des Problems:

  1. Verblassen Sie das Element nicht direkt, sondern blenden Sie einen übergeordneten Container aus, der das PNG enthält. Dies kann bedeuten, dass Sie Ihrem Code ein Wrapper-Element hinzufügen müssen.
  2. Geben Sie dem übergeordneten Element eine Hintergrundfarbe.
  3. Schließlich, wenn Sie immer noch Probleme haben, versuchen Sie, Ihrem Elternelement den alten zoom: 1 Trick zu geben. Geben Sie dem übergeordneten Element eine Stildeklaration von zoom: 1 (entweder über CSS oder einen Inline-Stil). Dadurch wird der IE gezwungen, dem Element hasLayout zu geben, das hasLayout neigt, alle Arten von seltsamen Anzeigeproblemen in IE zu beheben.

Quelle: Ausblenden eines transparenten 24-Bit-PNGs in IE7 +

Leider bedeutet dies, dass transparente PNGs nicht transparent vor dem Hintergrund eingeblendet werden können, da Sie dem übergeordneten Element eine Hintergrundfarbe zuweisen müssen, damit der Übergang reibungslos verläuft, dh ohne die schwarzen Pixel. background: transparent funktioniert nicht (da transparent nicht wirklich eine Farbe ist). 🙁

Ich lade einige PNGs dynamisch in das DOM … das funktionierte für mich: http://www.twinhelix.com/css/iepngfix/

Ich hatte dieses Problem mit Drupal Views Slideshow mit dem Fade Übergang auf transparenten PNGs.

Ich bin ganz zufällig auf die folgende Quasi-Lösung gestoßen. Ich weiß nicht, warum es funktioniert, aber der Nachteil ist, dass es im Wesentlichen die Cross-Fade-Hülle in IE entfernt (es scheint nicht sichtbar Auswirkungen FF oder Safari):

Views Slideshow wird als Teil seiner Ausgabe Folgendes ausgeben:

 

Ich versteckte Ansichten-Feld-Feld-Foto-Fid:

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

Nicht perfekt, aber vielleicht gut genug, bis ich eine bessere Lösung gefunden habe. Sie können sich die Entwicklungsseite ansehen: http://acupuncture2.polishyourimage.com/

Ich benutze auch Weezy Lösung, aber spielt nicht gut mit IE7. Die Auswirkungen sind noch schlimmer.

Wenn die jQuery opacity-Eigenschaft der animate-function zugewiesen wird statt Black-Border-Bug, wird ein Black & White-Border-Bug erzeugt 😛 Also habe ich folgendes für IE8 getan;

Im Kopf IE8 bedingt Kommentar mit dem HTC Verhalten auf class .fixpng vor allem für HTC.

  

HTC-Datei in IE8pngfix.htc geändert. Zeile 75 in der .htc geändert in

! / MSIE (8) / .test (navigator.userAgent

Es ist eigentlich doppelt gefiltert, zuerst IE-bedingte und dann in HTC, aber was zur Hölle!

Ich fand das, weil htc jQuery stören könnte. Beispiel;

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

Musste $ (div # tooltip) .css ({opacity: 0}) ändern, um anzuzeigen: none in CSS und set display: ‘block’ im Hover-Event.

Wenn also jemand eine funktionierende Lösung für IE7 gefunden hat, wäre ich wirklich glücklich. Alle oben genannten Workarounds / Hacks funktionieren nicht für mich. Über IE6 ist mir keine Sekunde wichtig.

Ok, also nahm ich Darko Z Vorschlag über das Div. Am Ende musste ich jQuery Cycler fading FX mit drupal 7 auf IE arbeiten lassen. Anstatt einen Tag zu platzieren, habe ich divs verwendet und the.png zusammen mit dem Hintergrund des Bildes angewendet

Also habe ich das geändert:

  

zu diesem:

  

dann in der CSS habe ich:

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

und es funktioniert für jetzt = D.

Hoffe es hilft, Defigo

Ich habe die ultimative Lösung für dieses verdammte IE-PNG-BlackBorderProblem, wenn ich Fading oder andere jQuery-Effekte verwende. Es funktioniert in jedem IE> 6 sogar in IE8 !:

  1. Laden Sie jQuerys pngFix unter http://jquery.andreaseberhard.de/pngFix/ herunter.

  2. Ändern Sie dieses Skript, indem Sie if (jQuery.browser.msie && (ie55 || ie6)) { suchen: if (jQuery.browser.msie && (ie55 || ie6)) { und ersetzen Sie es durch: if (jQuery.browser.msie) {

  3. Erstelle eine leere.gif (1×1 transparentes gif)

  4. .pngFix( {blankgif: '< relative location to the blank.gif >'} ); a: .pngFix( {blankgif: '< relative location to the blank.gif >'} ); am Ende der Zeile, wo Sie jQuery-Effekte ausführen, z. $('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );

  5. Stellen Sie sicher, dass alle Bilder geladen wurden, bevor Sie jQuery-Effekte in Ihrer Dokumentbereitschaftsfunktion verwenden, indem Sie das Ereignis .load im Fenster DOM-Element verwenden:

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

  6. Laden Sie die Seite in IE8 und fühlen Sie sich glücklich 😉

  7. Sie können es in Aktion auf http://www.claudworks.net sehen

Keine hässlichen dunklen Grenzen mehr um einige animierte PNGs in IE.

Ich habe die Fehlerbehebung für diesen Fehler gefunden, füge einfach das Wrapping div und das img und andere Elemente hinzu (zB h1, h2, p)

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

Dies wird es beheben

Das hat mich für ein paar Tage in den Wahnsinn getrieben und ich bin schließlich über PNG-Fix von Unit gestolpert. http://labs.unitinteractive.com/unitpngfix.php – funktioniert mit Cycle und hinderte mich daran, zu einer JPEG-Lösung zu wechseln!

Es braucht ein bisschen basteln, um bestimmte PNGs im Zyklus div zu zielen, aber sie arbeitet!

In der Hoffnung, jemandem zu helfen, der dieses Problem hat:

Ich hatte transparente .png Hintergründe (gekachelt) auf ein paar Divs auf meiner Seite und als ich das jquery cycle plugin aktivierte, wurden diese transparenten Bereiche verdreht. Sie haben etwas von ihrer Transparenz verloren.

Meine Lösung bestand darin, die Fliesen einfach viel größer zu machen, also gibt es wirklich keine Fliesen. Es gibt einen kleinen Kompromiss für die Dateigröße, aber das Problem wurde behoben.

Ich habe die Methoden fadeIn und fadeOut umgeschrieben. Es scheint, dass ich nicht die schwarze Farbe auf PNG-Bild bekomme. Kein Elternteil wird benötigt. Immer noch verwenden Sie als jQuery.

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

Wenn Sie es sich leisten können, ein wenig Bildqualität zu opfern, können Sie die Bilder als PNG-8 anstelle von PNG-24 speichern und dann das von Prosini erwähnte Fix, d

 cleartype: true, cleartypeNoBg: true 

und das sollte funktionieren. Mit PNG-24 bekam ich während der Übergänge immer noch einen schwarzen Rand.

Obwohl dies nicht speziell auf das Zyklus-Plugin beschränkt ist, kann dies anderen helfen. Ich stieß auf diesen Stream in meinem Versuch, eine Lösung für .animate () transparente / transluzente PNG-Dateien zu finden. Ich hatte das Problem einer schwarzen Grenze sowohl in IE7 und IE8. Die Bilder erscheinen gut, bis ich versuchte, JQuery zu verwenden, um die Deckkraft zu animieren …

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

Ich ging durch eine Reihe von Lösungen und leider war keiner von ihnen ideal. Obwohl dieser Stream etwas veraltet ist, kann er anderen helfen, immer noch nach einer Lösung zu suchen. Am Ende habe ich die Twin Helix-Lösung ( http://www.twinhelix.com/css/iepngfix/ ) mit ein bisschen Optimieren benutzt. Ich bin kein großer Fan von .htc-Dateien, aber das ist nebensächlich. Ich habe die Datei iepnfix.htc (~ Zeile 75) bearbeitet, um nach IE7 und IE8 zu suchen. Ich habe mich verändert…

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

zu

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

Von dort folgte ich den allgemeinen statementen (siehe Demo) und fügte dieses Bit zu meinem CSS hinzu

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

Zusätzlich und wie andere schon erwähnt haben, musste ich mein Bild in einem Container verschachteln …

 

Dann habe ich den .animate () Effekt auf das enthaltene div angewendet. Ein bisschen einschränkend, aber dies war der einzige Weg, wie ich verblassen konnte, um konsequent zu arbeiten. In einem Fall habe ich festgestellt, dass das Transparenzproblem die Transparenz in einer transparenten GIF-Datei animierte. Oh, und ob ich .fadeIn () /. FadeOut statt .animate () benutzte, machte keinen Unterschied.

Das ist alles ziemlich hektische Zeug, um das Sie gebeten werden. Alles sehr kodierend codingsky.

Hier ist mein Vorschlag. IE erlaubt es einem Png-Hintergrund über einem farbigen Hintergrund nicht, in Frieden zu leben, so …

  
 
 

Beachten Sie, dass das erste Div der Z-Index 2 ist (über dem 2. Div).

Dies kann vereinfacht werden, indem Sie Ihre bgColor in den Hintergrund css in der 1. Div setzen und das zweite div entfernen. Dies triggers das Problem der schwarzen Bereiche. Ich hatte dieses Problem selbst.

Die einzige Möglichkeit, ein Problem zu sehen, bei dem Sie diese Methode nicht verwenden können, besteht darin, dass Sie zwei PNG-Hintergrundbilder übereinander legen und gleichzeitig ausblenden müssen. Tu das nicht. Sie müssen jeden nach dem anderen animieren.

  1. Definieren Sie eine feste Hintergrundfarbe für Ihr Bild:
     .container img {
          Hintergrundfarbe: weiß;
     }
  1. Definieren Sie die css-Eigenschaft background-image Ihres Bildes mit seinem src- Attribut:
     $ ('. container img'). jeder (function () {
          $ (this) .css ('background-image', $ (this) .attr ('src'));
     });

Vorteil: Sie müssen Ihr Markup nicht ändern

Nachteil: Manchmal ist das Auftragen einer festen Hintergrundfarbe keine akzeptable Lösung. Es ist normalerweise für mich.

Um dieses Problem zu lösen, fügen Sie einfach Folgendes hinzu:

“Filter”: “”

zu Ihrer .css () oder .animate () und es wird eine Reihe von IE-bezogenen Problemen beheben.

Die zuverlässigste Lösung ist, keine PNGs in Fading-Stil-Animationen in Browsern zu verwenden.

Ich habe fast jede "Reparatur" und Variante eines Fixes ausprobiert, die ich für dieses Problem finden konnte und hatte keinen Erfolg. Die Lösung, die ich verwendete, bestand darin, PNGs zu exportieren, die mit Fading-Stil-Animationen versehen werden sollten (dh fadeIn / fadeOut), um Gifs zu erstellen und einen bedingten Ersatz für . Obwohl die Gifs in einem modernen Browser nicht so gut aussehen wie PNGs, sehen sie wesentlich besser aus als IE8 und früher, und diese Methode funktioniert zuverlässig. Sie können immer noch nette PNGs für fähige Browser anzeigen und wenn der Fix angewendet wird, wird nichts anderes kaputt gemacht; Die meisten PNG-Hacks sind dafür bekannt, andere CSS-Eigenschaften zu zerstören. Ihr Code könnte etwa so aussehen:

 $(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 }); } } 

Weezy ‘s Lösung hat für mich funktioniert!

Ich habe die .htc-Datei weiter optimiert und diese Zeile geändert:

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

zu:

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

Auf diese Weise ignoriert das .htc-Skript alle .png-Dateien, sofern sie nicht mit .fixme.png enden (z. B. “transparant.fixme.png”). Ich wollte damit das Skript etwas beschleunigen und sicherstellen, dass nur Problem-PNGs behoben werden (die müssen transparent sein).

Ich benutze andere .pngs, die nicht transparent sind, und daher muss dieses Skript nicht gegen sie ausgeführt werden.

Die beste Lösung ist unitpngfix .

Fügen Sie es in Ihr Skript ein und stellen Sie sicher, dass Sie den Pfad zu Ihrem 1px by 1px transparent gif angeben. Voila!