Eliminar el borde alrededor de la imagen de sprite en Chrome

La primera vez que uso esta técnica, parece que independientemente de los atributos que trato de asignar, el borde no desaparecerá en Chrome. Otros navegadores están bien. He intentado contornear: ninguno, borde: 0; etc., etc. También intenté agregar un borde de color alrededor de la imagen, y noté que el borde negro todavía estaba allí dentro del borde coloreado. No parece querer irse.Eliminar el borde alrededor de la imagen de sprite en Chrome

Work-around's o consejos muy apreciados.

.share-link { 
display: block; 
width: 41px; 
height: 32px; 
text-decoration: none; 
background: url("link-icon.png"); 
} 

.share-link:hover { 
background-position: -41px 0; 
} 


<a title="Share this Link" href="#"><img class="share-link"></a>

Fuente

2012-02-07 Z with a Z

Lo siento por preguntar, pero ¿puede ese borde negro ser parte de la imagen en sí por accidente? – kapa

dar un ejemplo jsfiddle por favor. – Christoph

@bazmegakapa exactamente mi pensamiento, tal vez la imagen es más pequeña que 41x32px ... – Christoph

Es porque está utilizando una etiqueta img sin el atributo src. Chrome básicamente indica el tamaño del contenedor sin nada en él.

Si no desea colocar una imagen entre las etiquetas de anclaje, entonces no use una etiqueta de imagen. No es necesario colocar nada entre las etiquetas.

Demo here.

Fuente

2012-02-07 08:29:17 Scott

Ahh ... Ok. Esto tiene sentido. –

+1 Exactamente lo que comencé a escribir. Use un 'img' u otro elemento con un conjunto' background-image'. [Más sobre SO] (http://stackoverflow.com/questions/4335957/using-sprites-with-img-tag/4336431#4336431). En el ejemplo de OP, la 'background-image' se especificará en' a'. – kapa

Funciona perfecto Scott. Gracias por la información :) Estoy seguro de que mucha gente encontrará esto útil. Aclamaciones. –

Si su preguntando para deshacerse de la frontera que activa onfocus a continuación:

*:focus {outline: none;}

.nohighlight:focus { outline:none; }

Esto debe deshacerse de la frontera.

Fuente

2012-02-07 08:20:16

Hay un borde independientemente del enfoque. Permanece constante –

Esto también funciona para es decir. – enkor

Es un error Chrome, haciendo caso omiso del "border: none;" estilo.

Digamos que tiene una imagen "download-button-102x86.png" que tiene 102x86 píxeles de tamaño. En la mayoría de los navegadores, deberías reservar ese tamaño para su ancho y alto, pero Chrome solo pinta un borde allí, sin importar lo que hagas.

Así que engañas a Chrome haciéndole creer que no hay nada allí - tamaño de 0px por 0px, pero con exactamente la cantidad correcta de "relleno" para permitir el botón. Aquí hay un bloque de identificación de CSS que estoy usando para lograr esto ...

#dlbutn { 
    display:block; 
    width:0px; 
    height:0px; 
    outline:none; 
    padding:43px 51px 43px 51px; 
    margin:0 auto 5px auto; 
    background-image:url(/images/download-button-102x86.png); 
    background-repeat:no-repeat; 
}

Viola! Funciona en todas partes y se deshace del contorno/borde en Chrome.

Fuente

2013-02-05 14:15:20

2015 y esto todavía funciona perfectamente en Chrome e IE10. Gracias – BrianLegg

-2

Por defecto, cualquier imagen envuelta en un enlace tendrá un borde alrededor de la imagen (similar a la forma en que el texto está subrayado). Quitar el borde es simple

a image {border: none} or a image {border: 0}

Ya que nunca quiero ver el borde alrededor de los enlaces de imágenes por lo general puse lo anterior en todos los sitios que desarrollo

Fuente

2013-07-15 09:17:32

Esto es CSS malformado. El selector correcto es 'a img' no' a image' – Scott

Selector de CSS incorrecto y respuesta incorrecta. Su problema no es la propiedad '' 'border''', sino el" outline "(no la propiedad' '' outline''' también) que chrome dibuja a una imagen cuando no existe el atributo '' 'src''' en eso. –

se puede utilizar una base 64 muy pequeña imagen transparente

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

Fuente

2014-10-31 13:35:30 Francesco

simple, me gusta, – oCcSking

Mis imágenes incrustadas en base64 seguían mostrando una línea gris a su alrededor sin importar lo que hice. Usar <div> en lugar de <img> funcionó para mí.

ANTES (mal) utilicé:

en HTML:

<img class='message-bubble-small'>

en CSS:

img.message-bubble-small { 
    background-image: url(data:image/png;base64,...); 
    background-size: 16px 16px; 
    width: 16px; 
    height: 16px; 
    float: left; 
}

DESPUÉS utilicé:

i n HTML:

<div id='message-bubble-small'>

en CSS:

#message-bubble-small { 
    background-image: url(data:image/png;base64,...); 
    background-size: 16px 16px; 
    width: 16px; 
    height: 16px; 
    float: left; 
}

Con el último ejemplo tengo líneas no más grises en Chrome.

Fuente

2017-12-05 16:21:48

Eliminar el borde alrededor de la imagen de sprite en Chrome

Respuesta

Cuestiones relacionadas