Au lieu de border: none; ou border: 0; dans votre CSS, vous devriez avoir:

 border-style: none; 

Vous pourriez également mettre ceci dans la balise d’image comme ceci:

L’un ou l’autre fonctionnera à moins que l’image n’ait pas de src . Ce qui précède concerne les bordures de liens désagréables qui apparaissent dans certains navigateurs où les bordures refusent de jouer agréablement. La bordure fine qui apparaît quand il n’y a pas de src est parce que chrome montre qu’en réalité aucune image n’existe dans l’espace que vous avez défini. Si vous rencontrez ce problème, essayez l’une des méthodes suivantes:

• Utilisez un élément

  au lieu d’un élément (la création d’un élément avec une image d’arrière-plan est tout ce que vous faites, la n’est vraiment pas utilisée)

• Si vous voulez / avez besoin d’une utilisez la solution de Randy King ci-dessous
• Définir une image src

C’est un bug Chrome, en ignorant le “border: none;” style.

Disons que vous avez une image “download-button-102×86.png” qui a une taille de 102×86 pixels. Dans la plupart des navigateurs, vous pouvez réserver cette taille pour sa largeur et sa hauteur, mais Chrome ne fait que peindre une bordure, peu importe ce que vous faites.

Donc, vous trompez Chrome en pensant qu’il n’y a rien là-bas – taille de 0px par 0px, mais avec exactement la bonne quantité de “padding” pour permettre le bouton. Voici un bloc CSS que j’utilise pour accomplir cela …

 #dlbutn { display:block; width:0px; height:0px; outline:none; padding:43px 51px 43px 51px; margin:0 auto 5px auto; background-image:url(/images/download-button-102x86.png); background-repeat:no-repeat; } 

Voila! Fonctionne partout et se débarrasse du contour / bordure dans Chrome.

Pour quiconque veut se débarrasser de la bordure lorsque le src est vide ou qu’il n’y a pas de src, utilisez simplement ce style:

 IMG[src=''], IMG:not([src]) {opacity:0;} 

Il masquera complètement le tag IMG jusqu’à ce que vous ajoutiez un src

Ajouter l’atsortingbut border = “0” dans la balise img

Si vous essayez de corriger le bug de Chrome lors du chargement des images, mais que vous souhaitez également que votre image fictive charge l’utilisation (avec des images de chargement différé, par exemple), cette astuce peut être utile:

 .container { overflow: hidden; height: 200px; width: 200px } .container img { width: 100%; height: 100% } .container img[src=''], .container img:not([src]) { width: 102%; height: 102%; margin: -1%; } 

Cela rendra la bordure cachée dans le débordement du conteneur et vous ne la verrez pas.

Tournez ceci:

Dans ceci:

J’ai aimé la solution de Randy King dans la mesure où chrome ignore le style “border: none”, mais c’est un peu complexe à comprendre et il ne fonctionne pas dans les navigateurs anciens et ceux des versions 6. En prenant son exemple, vous pouvez le faire:

css:

 ins.noborder { display:block; width:102px; height:86px; background-image:url(/images/download-button-102x86.png); background-repeat:no-repeat; } 

html

Assurez-vous que lorsque vous utilisez la balise ins pour la fermer avec un “” ou que la mise en forme semble géniale.

Si vous n’avez pas défini de src ou si l’atsortingbut src est vide dans une balise img, la plupart des navigateurs créeront une bordure. Pour corriger cela, utilisez l’image transparente comme src:

Dans votre balise img src, ajoutez une bordure = “0”, par exemple, comme expliqué par @Amareswar ci-dessus

using border = “0” est un moyen affectif, mais vous devrez append cet atsortingbut pour chaque image.

J’ai utilisé le jQuery suivant pour append cet atsortingbut pour chaque image car je déteste ce contour et cette bordure autour des images.

 $(document).ready(function () { $('img').each(function () { $(this).attr("border", "0"); }); }); 

css en ligne

J’ai eu un problème similaire lors de l’affichage d’une image .png dans une balise div. Une fine ligne noire (1px je pense) a été rendue sur le côté de l’image. Pour y remédier, j’ai dû append le style CSS suivant: box-shadow: none;

identique à ce que @ aaron-coding et @ randy-king avaient – mais juste un plus générique pour cacher la bordure de l’image avant qu’ils ne soient chargés (c’est-à – dire avec lazy-load.js ou quelque chose

(apparemment je ne peux pas faire un bloc de code dans mon commentaire original)

 .lazy-load-borderFix { display: block; width: 1px !important; height: 1px !important; outline: none; padding: 0px; margin: -4px; background-image:none !important; background-repeat:no-repeat; } 

Je le répare en utilisant le style de remplissage:

 #picture { background: url("../images/image.png") no-repeat; background-size: 100%; } .icon { height: 30px; width: 30px; padding: 15px; } 

La bordure disparaît alors que vous augmentez la valeur de remplissage. Trouvez votre propre valeur.

Vous pouvez supprimer la bordure en définissant text-indent sur un très grand nombre, mais l’alt de l’image a également disparu. Essaye ça

 img:not([src]) { text-indent: 99999px !important; } 

cela a fonctionné pour moi. Ça m’a pris des jours, ça m’a rendu fou.

 img.logo { display:block; width:100%; height:0px; outline:none; padding:43px 51px 43px 51px; margin:0 auto 5px auto; } 

Cela se produit parce que vous utilisez une balise img sans atsortingbut src. La solution consiste à placer l’image dans un div. Quelque chose comme ca: