html - img - borde de visualización de cromo/safari alrededor de la imagen

img html title

Question

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:

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

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

Gracias por adelantado

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

He solucionado este problema con:

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

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

Answer 6

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.

Answer 7

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

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

Esto funciona para mí

Answer 8

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 36x36, puede establecer el ancho y alto en 0 y el marcado: 18px

Answer 9

.related_photo {
content: '''';
}

Answer 10

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

Answer 11

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