bordo di visualizzazione cromo / safari intorno all’immagine

Chrome e Safari stanno visualizzando un bordo intorno 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:

    

adfadfad

asdfadfadfaf
...

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

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

Grazie in anticipo

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.

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

Se vuoi un’icona di 36×36, puoi impostare larghezza e altezza a 0 e pad: 18px

 .related_photo { content: ''; } 

So che è una vecchia domanda. Ma un’altra soluzione è quella di impostare src su un pixel trasparente 1x1

  

Questo funziona per me.

Questo può accadere quando l’immagine è piantata dynamicmente da css (ad es. http://webcodertools.com/imagetobase64converter ) per evitare richieste HTTP aggiuntive. 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.

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

All’interno di img.related_photo , devi cambiare border: solid thin #DFDFDF; al border: 0 .

Ho risolto questo problema con:

  

Il right: 15px è dove vuoi che venga mostrata l’immagine, ma puoi posizionarla dove vuoi.

Ho appena aggiunto src = “trans.png”, trans.png è solo un png di sfondo trasparente 100×100 da photoshop. Ha funzionato come un fascino senza confini

Per riassumere le risposte fornite già: le opzioni per rimuovere il bordo grigio da img:not([src]) , ma comunque visualizzare un’immagine utilizzando l’immagine di background-image in Chrome / Safari sono:

  • Utilizza un tag diverso che non ha questo comportamento . (Grazie a @Druvision)
    Ad es .: div o span .
    Faccia triste: non è altrettanto semantica.

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