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