web-dev-qa-db-fra.com

Supprimer la bordure de l'image dans Chrome/IE9

J'essaie de supprimer la fine bordure qui apparaît pour chaque image dans Chrome & IE9 . J'ai ce CSS:

outline: none;
border: none;

En utilisant jQuery, j’ai également ajouté un attribut border=0 sur chaque balise d’image. Mais la bordure telle que montrée sur l'image apparaît encore. Toute solution?

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>

Voir la capture d'écran ci-jointe:

Screenshot

cssimagegoogle-chromestylesheetborder
49
Prasad

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

border-style: none;

Vous pouvez aussi mettre ceci dans la balise image comme ceci:

<img src="blah" style="border-style: none;">

L'un ou l'autre fonctionnera sauf si l'image n'a pas src. Ce qui précède est destiné aux vilaines frontières de liens qui apparaissent dans certains navigateurs où les frontières refusent de jouer à Nice. La fine bordure qui apparaît lorsqu'il n'y a pas de src est due au fait que chrome indique qu'il n'existe en réalité aucune image dans l'espace que vous avez défini. Si vous rencontrez ce problème, essayez l’une des solutions suivantes:

  • Utilisez un <div> au lieu d'un élément <img> (la création d'un élément avec une image d'arrière-plan est tout ce que vous faites, la balise <img> n'est vraiment pas utilisée) 
  • Si vous voulez/avez besoin d'une balise <img>, utilisez la solution de Randy King ci-dessous 
  • Définir une image src
51
Zach

C'est un bug de Chrome, ignorant la "border: none;" style.

Supposons que vous ayez une image "download-button-102x86.png" qui a une taille de 102x86 pixels. Dans la plupart des navigateurs, vous réserveriez cette taille pour sa largeur et sa hauteur, mais Chrome y peint simplement une bordure, peu importe ce que vous faites.

Vous incitez donc Chrome à penser qu’il n’ya rien - taille de 0px par 0px, mais avec la bonne quantité de "remplissage" pour permettre le bouton. Voici un bloc d'identifiants 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 supprime le contour/la bordure dans Chrome.

52
Randy King

Pour ceux qui veulent se débarrasser de la frontière lorsque le code src est vide ou qu'il n'y a pas de code src, utilisez simplement ce style:

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

Il va cacher la balise IMG complètement jusqu'à ce que vous ajoutiez un src

15
John

Ajouter un attribut border = "0" dans la balise img

6
Amareswar

Si vous essayez de corriger le bogue Chrome lors du chargement des images, mais que vous souhaitez également que votre image fictive soit chargée, utilisez (avec Lezy Chargement des images, par exemple), utilisation peut effectuer cette astuce: 

.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 fera que la bordure sera cachée dans le débordement du conteneur et vous ne la verrez pas. 

Tournez ceci:  Chrome border bug

Dans ceci:  Chrome border bug fixed

3
aaron-coding

Si vous n'avez pas défini de src ou si l'attribut src est vide dans une balise img, la plupart des navigateurs créeront une bordure. Pour résoudre ce problème, utilisez une image transparente en tant que src:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
2
code19

J'ai aimé la solution de Randy King dans ce chrome qui ignore le style "border: none", mais c'est un peu complexe à comprendre et cela ne fonctionne pas dans les navigateurs ie6 et plus anciens. En prenant son exemple, vous pouvez faire ceci:

css:

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

html

<ins class="noborder"></ins>

Assurez-vous que lorsque vous utilisez la balise ins pour la fermer avec un "", sinon le formatage semblera génial.

2
sksallaj

Vous pouvez supprimer la bordure en définissant l'indentation du texte sur un très grand nombre, mais l'alt de l'image disparaît également .

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

css en ligne

<img src="logo.png" style="border-style: none"/>
1
user2645981

utiliser border = "0" est un moyen affectif, mais vous devrez ajouter cet attribut à chaque image.

j'ai utilisé le jQuery suivant pour ajouter cet attribut à chaque image car je déteste ces contours et bordures autour des images.

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

Dans votre balise img src, ajoutez un border = "0", par exemple, <img src="img.jpg" border="0">, comme expliqué par @Amareswar ci-dessus.

1
doodoodukes

cela a fonctionné pour moi. Cela a pris des jours, ce qui m'a rendu fou.

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

identique à ce que @ aaron-coding et @ randy-king avaient - mais juste un plus générique pour masquer la bordure de l'image avant qu'elle ne soit chargée (c'est-à-dire avec lazy-load.js ou quelque chose comme ça

(apparemment je ne peux pas faire de 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;
}
0
rwcorbett

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

0
Zerato

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

#picture {
    background: url("../images/image.png") no-repeat;
    background-size: 100%;
}

.icon {
    height: 30px;
    width: 30px;
    padding: 15px;
}

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

0
Alexandr