PNG8 Bordure Noire dans IE

J'ai un problème c'est à dire avec PNG8 images en ce qu'il s'affiche avec un gros sale noir de la frontière dans l'ombrage de mon *.png. (IE7, IE8)

Je suis en utilisant alphatransparency et ont essentiellement d'ombrage sous mon image de petite taille. Tous les navigateurs rendre cette amende, sauf IE qui rend l'ombrage comme un cercle noir?

J'ai besoin de l'image "transparent", car il apparaît au-dessus d'une variété de multicolores de fond, etc?

Des idées?

OriginalL'auteur Tom | 2009-10-14

  1. 5

    Je suis obligé de répondre. Je viens de résoudre ce problème. Juste pour rappel, dans IE 7 et IE 8, transparent PNG et GIF pour les images en liens, parfois, ont une bordure noire ou de l'ombre autour d'eux.

    Vous avez besoin pour vous assurer que il n'y a pas d'opacité des filtres sur ces images. J'ai l'opacité sur 100. J'ai changé de ce 

    filter:0;

    Rappelez-vous aussi floues texte de lien, vous devez spécifier une couleur de fond pour le lien ou sinon, il sera floue et floue.

    La mort d'IE!!

    OriginalL'auteur Jason

  2. 3

    Je tiens à vous dire merci pour la réponse, et d'ajouter quelque chose.
    Dans mon cas précis, j'ai besoin de remplacer un style:

    filter: alpha(opacity=50);

    En ajoutant le code ci-dessous fait mon opacité correcte, mais il a ajouté que la question des bords noirs:

    filter: alpha(opacity=100);

    C'est la ligne qui m'a sauvé par la fixation de la question:

    filter: 0;

    J'espère que cela aide quelqu'un d'autre aussi!

    Quelqu'un peut-il expliquer pourquoi ce qui se passe avec IE7? Le correctif semble fonctionner, ce qui est excellent (merci!), mais je tiens à le comprendre à un niveau plus profond, dans le cas où j'ai couru dans une situation dans l'avenir, où je ne peux pas juste faire de filtre: 0. (Et pour satisfaire ma curiosité, en général).

    OriginalL'auteur Jamie

  3. 3

    OK - résolu le problème. Il semblait que mon JS a été d'assigner

    filter: alpha(opacity=100);

    à l'image et c'est ce qui a été l'origine de la marque noire à comparaître comme je l'avais déjà faite l'image alphatransparent dans le PNG8 encodage.

    OriginalL'auteur Tom

  4. 1

    J'ai souffert de problèmes similaires avec l'opacité dans ie7, ie8 ce que vous pouvez faire est de donner à votre image png un background color qui permettra d'éliminer le laid frontières de l'image....Il fonctionne pour moi

    hey merci - mais que faire si j'ai besoin d'un arrière-plan transparent ? c'est à dire qu'il apparaît sur d'autres images sur mon site, donc il est impossible de dire ce que la couleur d'arrière-plan ....

    OriginalL'auteur halocursed

  5. 1

    Cela a fonctionné pour moi d'animation avec des opacités:

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

    OriginalL'auteur TomTheMeatBomb

  6. 1

    Après la recherche de solutions alternatives, je suis retourné à la source des images pour les réponses.

    Il semble que 24bit .png-fichiers de causer des problèmes, mais 8bit versions à bien se comporter. Je n'ai pas étudié en profondeur.

    Ces réglages dans Photoshop Enregistrer pour le Web & Périphériques de la boîte de dialogue m'a aidé à obtenir débarrasser des traits noirs dans l'opacité des animations:

    PNG-8, Sélective, de Diffusion, de Transparence, de Couleurs: 256, Mat: Aucun, Pas de Tramage de transparence, Entrelacé et le Convertir en sRGB avec "Internet Standard RVB".

    OriginalL'auteur Ismo Vuorinen

  7. 1

    Vous pouvez le faire en CSS acheter à l'aide d'IE système de filtrage propriétaire.

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

    DÉMO

    vous aurez besoin d'utiliser un blank.gif pour la première image dans votre déclaration de fond. C'est tout simplement confondre ie8 et l'empêcher d'utiliser le filtre et l'arrière-plan que vous avez défini, et de n'utiliser le filtre. D'autres navigateurs prennent en charge plusieurs images d'arrière-plan et comprendre le contexte de la déclaration et à ne pas comprendre le filtre, donc en utilisant le fond seulement.

    Vous pouvez aussi avoir besoin de jouer avec les sizingMethod dans le filtre pour le faire fonctionner comme vous le souhaitez.

    OriginalL'auteur Fresheyeball

  8. 0

    J'ai eu la même chose se produire à un PNG avec de la transparence qui a été défini comme image de fond d'écran de l'un <A> élément avec l'opacité appliquée.

    La solution était de définir la couleur d'arrière-plan de la <A> élément.

    Donc la suivante:

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

    Se transforme en:

    /* "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: ...;

    OriginalL'auteur Josh Mouch