borde de visualización de cromo / safari alrededor de la imagen

Chrome y Safari muestran un borde alrededor de la imagen, pero no la quiero. No hay frontera en Mozilla. Miré a través de CSS y HTML, y no puedo encontrar nada que lo esté arreglando.

Aquí está el código:

    

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

Lo siento, copié algún código anterior. Aquí está el código que me está dando problemas

Gracias por adelantado

Ahora no sé si esto es un error con Chrome o no, pero el borde gris aparece cuando no puede encontrar la imagen, la url de la imagen está rota o como en su caso el src no está allí. Si le da a la imagen una URL adecuada y el navegador la encuentra, el borde desaparece. Si la imagen no debe tener un src, deberá eliminar el alto y el ancho.

sarcastyx tiene razón, pero si desea un workarround puede establecer el ancho y alto en 0 y un relleno para hacer espacio para su imagen.

Si quiere un ícono de 36×36, puede establecer el ancho y alto en 0 y el marcado: 18px

 .related_photo { content: ''; } 

Sé que es una vieja pregunta. Pero otra solución es establecer el src en un píxel transparente de 1x1

  

Esto funciona para mí

Esto puede suceder cuando la imagen es plantada dinámicamente por css (por ejemplo, mediante http://webcodertools.com/imagetobase64converter ) para evitar solicitudes HTTP adicionales. En este caso, no queremos tener una imagen predeterminada debido a problemas de rendimiento. Lo resolví cambiando de una etiqueta img a una etiqueta 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; } 

Dentro de img.related_photo , debe cambiar el border: solid thin #DFDFDF; al border: 0 .

He solucionado este problema con:

  

La right: 15px es donde quieres que se muestre la imagen, pero puedes colocarla donde quieras.

Acabo de agregar src = “trans.png”, trans.png es solo un fondo transparente de 100×100 png desde photoshop. Funcionó como un encanto sin fronteras

Para resumir las respuestas ya dadas: sus opciones para eliminar el borde gris de img:not([src]) , pero aún mostrar una imagen usando background-image en Chrome / Safari son:

  • Use una etiqueta diferente que no tenga este comportamiento . (Gracias @Druvision)
    Ej: div o span .
    Cara triste: no es tan semántica.

  • Use padding para definir las dimensiones . (Gracias @Gonzalo)
    Por ejemplo, padding: 16px 10px 1px; reemplaza el width:20px; height:17px; width:20px; height:17px;
    Cara triste: las dimensiones y las intenciones no son tan obvias en el CSS, especialmente si no es un cuadrado par como el ejemplo de @Gonalo.