PNG8 Black Border in IE

Question

Ho un problema in IE con immagini PNG8 in quanto appare con un grande bordo nero sporco nell'ombra del mio * .png. (IE7, IE8)

Sto usando alphatransparency e fondamentalmente ho ombreggiatura sotto la mia piccola immagine. Tutti i browser rendono questo fine, tranne IE che rende l'ombreggiatura come un cerchio nero?

Ho bisogno dell'immagine "trasparente" perché appare sopra una varietà di sfondi multicolori, ecc.?

Qualche idea?

Answer 1

ho sofferto di problemi simili con l'opacità in IE7, IE8 che cosa si può fare è dare la vostra immagine png un background color che rimuoverà i brutti confini dall'immagine .... Funziona per me

Answer 2

OK - problema risolto. Sembrava che la mia JS assegnava

filter: alpha(opacity=100); 

per l'immagine e questo è ciò che stava causando il segno nero di apparire come avevo già fatto l'alphatransparent immagine nella codifica PNG8.

Answer 3

Vorrei ringraziare per la risposta e aggiungere qualcosa. Nel mio caso specifico, avevo bisogno di sostituire uno stile che era:

filter: alpha(opacity=50); 

Aggiungendo il codice qui sotto ha reso la mia opacità corretta, ma ha aggiunto la questione dei bordi neri:

filter: alpha(opacity=100); 

Questo è il linea che mi ha salvato risolvendo il problema:

filter: 0; 

Spero che questo aiuti anche qualcun altro!

Answer 4

Sono costretto a rispondere. Ho appena risolto anche questo problema. Solo per ricapitolare, in IE7 e IE 8, le immagini PNG e GIF trasparenti nei collegamenti a volte hanno un bordo o un'ombra nera attorno a loro.

È necessario verificare che non vi siano filtri di opacità su queste immagini. Ho l'opacità su 100. Ho cambiato questo per

filter:0; 

Ricordati anche per il testo di collegamento sfocata, è necessario specificare un colore di sfondo per il collegamento altrimenti sarà sfocata e sfocata.

Death to IE !!

Answer 5

questo ha funzionato per me con opacità animati:

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

Dopo la ricerca di soluzioni alternative, sono tornato alle immagini sorgente per le risposte.

Sembra che i file .png a 24 bit causino problemi, ma le versioni a 8 bit si comportano bene. Non ho approfondito questo argomento.

Queste impostazioni di Photoshop Salva per Web & dispositivi -dialog mi ha aiutato a sbarazzarsi dei tratti neri nelle animazioni di opacità:

PNG-8, Messa, Diffusion, Trasparenza, Colori: 256, Matte: Nessuno, No trasparenza Retinatura, interlacciamento e conversione in sRGB con "Internet standard RGB".

Answer 7

Ho avuto la stessa cosa per un PNG con trasparenza impostato come immagine di sfondo di un elemento <A> con opacità applicata.

La correzione era di impostare il colore di sfondo dell'elemento <A>.

Così, il seguente:

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

si trasforma 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

Puoi farlo in CSS acquistare utilizzando il sistema di filtraggio di proprietà di IE.

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

DEMO

è necessario utilizzare un blank.gif per l'immagine 'prima' nella dichiarazione di sfondo. Questo è semplicemente per confondere ie8 e impedirgli di usare sia il filtro che lo sfondo che hai impostato, e usare solo il filtro. Altri browser supportano più immagini di sfondo e capiranno la dichiarazione di background e non capiranno il filtro, quindi useranno solo lo sfondo.

Potrebbe anche essere necessario giocare con sizingMethod nel filtro per farlo funzionare nel modo desiderato.