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

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, copiar un código de edad antes. Aquí está el código que me está dando problemas

Gracias de antemano

Answer 1

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

Dentro img.related_photo, es necesario cambiar border: solid thin #DFDFDF; a border: 0.

Answer 4

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 quieres un icono de 36x36, se puede establecer la anchura y altura a 0 y PADING: 18px

Answer 5

Esto puede suceder cuando la imagen se plantó dinámicamente por css (por ejemplo, por http://webcodertools.com/imagetobase64converter) con el fin de evitar la extra de HTTP peticiones. 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 6

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

• Usar una etiqueta diferente, que doesn' t tiene este comportamiento. (Gracias @Druvision)
  Por ejemplo: div o span.
  Cara triste: no es tan semántica.

• Utilice padding para definir las dimensiones. (Gracias @Gonzalo)
  Eg padding: 16px 10px 1px; reemplaza 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

.related_photo { 
    content: ''; 
} 

Answer 8

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

Answer 9

Sé que es una vieja cuestión. Sin embargo, otra solución es establecer la src a un píxel transparente 1x1

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

Esto funciona para mí.

Answer 10

me han solucionado este problema con:

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

El right: 15px es donde desea que la imagen que se muestra, pero se puede colocar donde desee.

Answer 11

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