web-dev-qa-db-fra.com

bordure d'affichage chrome/safari autour de l'image

Chrome et Safari affichent une bordure autour de l'image, mais je n'en veux pas. Il n'y a pas de frontière dans Mozilla. J'ai parcouru les CSS et le HTML, et je ne trouve rien qui répare le problème.

Voici le code:

<tr>
  <td class="near">
    <a href="../index.html"class="near_place">
      <img class="related_photo" />
      <h4 class="nearby"> adfadfad </h4>
      <span class="related_info">asdfadfadfaf</span>
    </a>
    ...

CSS:

a.near_place {
    border: none;
    background: #fff;
    display: block;
}

a.near_place:hover{
    background-color: #F5F5F5;
}

h4.nearby {
    height: auto;
    width: inherit;
    margin-top: -2px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    display: inline;
}

img.related_photo {
    width: 80px;
    height: 60px;
    border: none;
    margin-right: 3px;
    float: left;
    overflow: hidden;
}

span.related_info {
    width: inherit;
    height: 48px;
    font-size: 11px;
    color: #666;
    display: block;
}


td.near {
    width: 25%;
    height: 70px;
    background: #FFF;

}

Désolé, j'ai déjà copié un ancien code. Voici le code qui me pose problème

Merci d'avance

htmlcssgoogle-chromesafarimozilla
20
golf_nut

Maintenant, je ne sais pas s’il s’agit d’un bogue avec Chrome ou non, mais la bordure grise apparaît quand elle ne trouve pas l’image, l’URL de l’image est cassé ou, comme dans votre cas, le src n’est pas là. Si vous attribuez à l’image une URL correcte et que le navigateur la trouve, la bordure disparaîtra. Si l'image ne doit pas avoir de code source, vous devrez supprimer la hauteur et la largeur.

41
sarcastyx

sarcastyx a raison, mais si vous souhaitez une solution de contournement, vous pouvez définir la largeur et la hauteur sur 0 et un remplissage pour libérer de l'espace pour votre image.

Si vous voulez une icône de 36x36, vous pouvez régler la largeur et la hauteur sur 0 et le patinage: 18px

12
Gonzalo
.related_photo {
   content: '';
}
5
Andrii Katsiubka

Je sais que c'est une vieille question. Mais une autre solution consiste à définir src sur un pixel transparent 1x1

<img class="related_photo"
     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

Cela fonctionne pour moi.

5
raphaëλ

Cela peut se produire lorsque l’image est plantée de manière dynamique par css (par exemple, par http://webcodertools.com/imagetobase64converter ) afin d’éviter des requêtes HTTP supplémentaires. Dans ce cas, nous ne voulons pas d’image par défaut en raison de problèmes de performances. Je l'ai résolu en passant d'une balise img à une balise div.

3
Druvision
img[src=""]{
    content: "";
}
2
Ben

J'ai résolu ce problème avec:

<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">

Le right: 15px est l'endroit où vous souhaitez afficher l'image, mais vous pouvez le placer où vous le souhaitez.

0
Sebas Palacio Florez

Je viens d'ajouter src = "trans.png", trans.png n'est qu'un fichier png d'arrière-plan transparent 100x100 de Photoshop. Travaillé comme un charme sans frontières

0
seca400
img.related_photo {
  width: 80px;
  height: 60px;
  **border: solid thin #DFDFDF;** //just remove this line
  margin-right: 3px;
  float: left;
  overflow: hidden;
}
0
maga

Dans img.related_photo, vous devez changer border: solid thin #DFDFDF; en border: 0.

0
thirtydot