Eliminar el borde de la imagen en Chrome / IE9

Estoy tratando de deshacerme del borde fino que aparece para cada imagen en Chrome e IE9. Tengo este CSS:

outline: none; border: none; 

Usando jQuery, también agregué un atributo border=0 en cada etiqueta de imagen. Pero el borde como se muestra en la imagen aún aparece. ¿Alguna solución?

 body { font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif; } img, a img { outline: none; border: none; } .icon { width: 16px; height: 16px; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; background-position: -48px -144px; background-image: url(theme/images/ui-icons_0078ae_256x240.png); margin-right: 2px; display: inline-block; position: relative; top: 3px; } 
 

Dashboard

Ver la captura de pantalla adjunta:

Captura de pantalla

En lugar de border: none; o border: 0; en tu CSS, deberías tener:

 border-style: none; 

También puedes poner esto en la etiqueta de la imagen así:

  

Cualquiera de los dos funcionará a menos que la imagen no tenga src . Lo anterior es para esos bordes de enlaces desagradables que aparecen en algunos navegadores donde las fronteras se niegan a jugar bien. El borde fino que aparece cuando no hay src es porque Chrome muestra que, de hecho, no existe ninguna imagen en el espacio que usted definió. Si tiene este problema, intente uno de los siguientes:

  • Use un elemento

    lugar de un elemento (de hecho, la creación de un elemento con una imagen de fondo es lo único que está haciendo, la etiqueta realidad no se está usando)

  • Si quiere / necesita una etiqueta use la solución de Randy King a continuación
  • Definir una imagen src

Es un error de Chrome, ignorando el “borde: ninguno”. estilo.

Supongamos que tiene una imagen “download-button-102×86.png” que tiene un tamaño de 102×86 píxeles. 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 para que piense 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; } 

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

Intereting Posts