bordo di visualizzazione cromo/safari intorno all'immagine

Question

Chrome e Safari stanno visualizzando un bordo attorno all'immagine, ma non ne voglio uno. Non ci sono confini in Mozilla. Ho esaminato il CSS e l'HTML e non riesco a trovare nulla che lo risolva.

Ecco il codice:

<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; 

} 

Siamo spiacenti, ho copiato qualche vecchio codice prima. Ecco il codice che mi sta dando problemi

Grazie in anticipo

Answer 1

Ora non so se si tratta di un bug con Chrome o meno, ma il bordo grigio appare quando non riesce a trovare l'immagine, l'URL dell'immagine è rotto o come nel tuo caso il src non è lì. Se si fornisce all'immagine un URL corretto e il browser lo trova, il bordo scompare. Se l'immagine non deve avere un src allora sarà necessario rimuovere l'altezza e la larghezza.

Answer 2

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

Answer 3

All'interno img.related_photo, è necessario modificare border: solid thin #DFDFDF; a border: 0.

Answer 4

sarcastyx ha ragione, ma se vuoi un workarround puoi impostare la larghezza e l'altezza su 0 e un padding per fare spazio alla tua immagine.

Se si desidera un icona del 36x36, è possibile impostare la larghezza e l'altezza a 0 e Pading: 18px

Answer 5

Questo può accadere quando l'immagine è piantato dinamicamente da CSS (ad esempio http://webcodertools.com/imagetobase64converter) al fine di evitare HTTP in più richieste. In questo caso non vogliamo avere un'immagine predefinita a causa di problemi di prestazioni. L'ho risolto passando da un tag img a un tag div.

Answer 6

In sintesi le risposte date già: le opzioni per rimuovere il bordo grigio da un img:not([src]), ma ancora visualizzare un'immagine utilizzando background-image in Chrome/Safari sono:

• Utilizzare un tag diverso che doesn' Ho questo comportamento. (Grazie a @Druvision)
  Ad esempio: div o span.
  Faccia triste: non è altrettanto semantica.

• Utilizzare padding per definire le dimensioni. (Grazie a @Gonzalo)
  Ad esempio padding: 16px 10px 1px; sostituisce width:20px; height:17px;
  Faccia triste: le dimensioni e le intenzioni non sono così ovvie nel CSS, specialmente se non è un quadrato uniforme come l'esempio di @ Gonalo.

Answer 7

.related_photo { 
    content: ''; 
} 

Answer 8

img[src=""]{ 
    content: ""; 
} 

Answer 9

so che è una vecchia questione. Ma un'altra soluzione è quella di impostare il src ad un pixel trasparente 1x1

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

Questo funziona per me.

Answer 10

ho fissato la questione con:

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

Il right: 15px è dove si desidera che l'immagine da visualizzare, ma è possibile posizionarlo dove si desidera.

Answer 11

Ho appena aggiunto src = "trans.png", trans.png è solo un png di sfondo trasparente 100x100 da photoshop. Ha funzionato come un fascino senza frontiere