9
votes

PNG8 bordure noire dans IE

J'ai un problème dans IE avec des images PNG8 en ce qu'elle apparaît avec une grosse bordure noire sale dans l'observation de mon * .png. (IE7, IE8)

J'utilise l'alphatatransparence et j'ai essentiellement une ombrage sous ma petite image. Tous les navigateurs rendent cette amende, à l'exception d'IE qui rend l'ombrage comme un cercle noir?

J'ai besoin de l'image "transparent" car il apparaît sur une variété d'arrière-plans multicolores, etc.

Des idées?


0 commentaires

8 Réponses :


1
votes

J'ai souffert de problèmes similaires à l'opacité dans IE7, c'est-à-dire ce que vous pouvez faire est de donner à votre image PNG une couleur de couleur qui éliminera les bordures laides de l'image .... Cela fonctionne pour moi


1 commentaires

hé merci - mais si j'ai besoin de l'arrière-plan transparent? C'est-il, il apparaît sur d'autres images sur mon site, il est donc impossible de dire quelle est la couleur de fond ....



3
votes

OK - a résolu le problème. Il semblait que mon JS affectait xxx

à l'image et c'est ce qui faisait apparaître la marque noire comme j'avais déjà fait l'image alphatransparent dans l'encodage PNG8. < / p>


0 commentaires

3
votes

J'aimerais dire merci pour la réponse et ajouter quelque chose. Dans mon exemple spécifique, je devais remplacer un style qui était: xxx pré>

Ajout du code ci-dessous fait mon opacité correcte, mais ajoute le problème des bords noirs: p>

filter: 0;


1 commentaires

Quelqu'un peut-il expliquer pourquoi cela se produit avec IE7? Le correctif semble fonctionner, ce qui est génial (merci!), Mais j'aimerais comprendre le niveau plus profond, au cas où je rencontre une situation dans le futur où je ne peux pas simplement filtrer: 0. (et Pour satisfaire ma curiosité, en général.)



5
votes

Je suis obligé de répondre. Je viens de résoudre ce problème aussi. Juste pour récapituler, dans IE7 et IE8, des images transparentes PNG et GIF dans des liens ont parfois une bordure noire ou une ombre autour d'eux.

Vous devez vérifier pour vous assurer qu'il n'y a pas de filtres d'opacité sur ces images. J'ai une opacité sur 100. J'ai changé cela en xxx

N'oubliez pas non plus pour le texte de liaison floue, vous devez spécifier une couleur d'arrière-plan pour le lien ou autre que ce sera flou et floue .

mort à IE !! / p>


0 commentaires

1
votes

Ceci a fonctionné pour moi avec des opacités animées: xxx


0 commentaires

1
votes

Après avoir recherché des solutions alternatives, je suis retourné aux images source des réponses.

Il semble que 24 bits .png-fichiers causent des problèmes, mais les versions 8 bits comportent bien. Je n'ai pas étudié cela en profondeur.

Ces paramètres dans la sauvegarde de Photoshop pour le Web et les appareils -Dialog ont aidé à vous débarrasser des traits noirs dans les animations d'opacité:

PNG-8, Sélectif, Diffusion, Transparence, Couleurs: 256, Matte: Aucun, Pas de transparence Néshésifs, entrelacés et convertis en SRGB avec "Internet standard RVB".


0 commentaires


1
votes

Vous pouvez le faire dans CSS Acheter en utilisant le système de filtrage exclusif de IE.

Filtre: PROGID: dximagetransform.microsoft.alphaimageloader (activé = 'TRUE', SIZEMETHOD = 'Échelle', SRC = 'Pathtoyourpng');

Démo

Vous devrez utiliser un vide.gif pour la «première» image dans votre déclaration de fond. Ceci est simplement pour confondre IE8 et l'empêcher d'utiliser à la fois le filtre et l'arrière-plan que vous avez défini et n'utilisez que le filtre. Les autres navigateurs prennent en charge plusieurs images de fond et comprendront la déclaration de fond et ne comprendront pas le filtre, d'où utilisez l'arrière-plan uniquement.

Vous devrez peut-être aussi jouer avec la sormeMethod dans le filtre pour le faire fonctionner comme vous le souhaitez.


0 commentaires