PNG8 Black Border in IE

Question

Ich habe ein Problem in IE mit PNG8 Bilder in dem es mit einem großen schmutzigen schwarzen Rand in der Beschattung meiner * .png erscheint. (IE7, IE8)

Ich verwende Alphatransparenz und habe im Grunde Schattierung unter meinem kleinen Bild. Alle Browser machen das gut, außer IE, der die Schattierung als schwarzen Kreis darstellt?

Ich brauche das Bild "transparent", weil es auf einer Vielzahl von mehrfarbigen Hintergründen, etc. erscheint?

Irgendwelche Ideen?

Answer 1

ich ähnliche Probleme mit Opazität in IE7 erlitten habe, IE8, was Sie tun können, ist Ihrem PNG-Bild ein background color geben, die die hässlichen Ränder aus dem Bild entfernen werden .... Es ist für mich

Answer 2

OK arbeitet - Problem gelöst. Es schien, dass mein JS

filter: alpha(opacity=100); 

auf das Bild, wurde die Zuordnung und das ist, was die schwarze Markierung verursacht wurde erscheinen, wie ich bereits hatte das Bild alphatransparent in der PNG8 Codierung gemacht.

Answer 3

Ich möchte danke für die Antwort sagen, und etwas hinzuzufügen. In meinem speziellen Fall, ich brauchte einen Stil zu überschreiben, die waren:

filter: alpha(opacity=50); 

Hinzufügen der folgende Code meiner Opazität richtig gemacht, aber hinzugefügt, um die Ausgabe der schwarzen Ränder:

filter: alpha(opacity=100); 

Dies ist Linie, die mich durch die Reparatur des Problems gerettet:

Ich hoffe, das hilft jemand anderes auch!

Answer 4

Ich bin gezwungen zu antworten. Ich habe gerade dieses Problem gelöst. Zur Erinnerung, in IE7 und IE 8 haben transparente PNG- und GIF-Bilder in Links manchmal einen schwarzen Rand oder Schatten um sie herum.

Sie müssen sicherstellen, dass diese Bilder keine Opazitätsfilter enthalten. Ich Opazität auf 100. Ich diese

filter:0; 

Denken Sie daran, auch für unscharfe Link-Text zu

geändert haben, müssen Sie eine Hintergrundfarbe für den Link angeben, sonst wird es unscharf und verschwommen.

Tod zu IE !!

Answer 5

Dieser arbeitete für mich mit animierten Trübungen:

img{ 
    background: transparent; 
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); 
    zoom: 1; 
} 

Answer 6

Nach alternativen Lösungen zu suchen, die ich für Antworten auf die Quellbilder zurückgegeben.

Es scheint, dass 24bit .png-Dateien Probleme verursachen, aber 8bit-Versionen verhalten sich gut. Ich habe das nicht gründlich untersucht.

speichern Diese Einstellungen in Photoshop für Web & Devices -Dialog mich in Opazität Animationen loszuwerden der schwarzen Striche erhalten geholfen:

PNG-8, Selektiv, Diffusion, Transparenz, Farbe: 256, Matte: Keine, da kein Transparenz Dither, Interlaced und Konvertieren in sRGB mit "Internet Standard RGB".

Answer 7

Ich hatte die gleiche Sache mit einem PNG mit Transparenz, die als das Hintergrundbild eines <A> Elements mit Opazität angewendet wurde.

Die Lösung war die Hintergrundfarbe des Elements <A>.

folgendes So:

filter: alpha(opacity=40); 
-moz-opacity: 0.4; 
-khtml-opacity: 0.4; 
opacity: 0.4; 
background-image: ...; 

verwandelt sich in:

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */ 
background-color: #FFFFFF; 

filter: alpha(opacity=40); 
-moz-opacity: 0.4; 
-khtml-opacity: 0.4; 
opacity: 0.4; 
background-image: ...; 

Answer 8

Sie tun können, es in CSS kaufen mit IE-eigene Filtersystem.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

DEMO

Sie benötigen einen blank.gif für das 'erste' Bild in Ihrem Hintergrund Erklärung zu verwenden. Dies ist einfach, um ie8 zu verwechseln und zu verhindern, dass es sowohl den Filter als auch den Hintergrund verwendet, den Sie festgelegt haben, und nur den Filter verwenden. Andere Browser unterstützen mehrere Hintergrundbilder und verstehen die Hintergrund-Deklaration und verstehen den Filter nicht, weshalb nur der Hintergrund verwendet wird.

Sie müssen möglicherweise auch mit dem lizingMethod im Filter spielen, damit es so funktioniert, wie Sie es möchten.