Esquema borroso en un botón de formulario cuando se usa una imagen de fondo con un radio de 20px

Por alguna razón, exclusivamente en máquinas con Windows, en el botón Iniciar sesión en esta página, obtengo este esquema borroso que es difícil de explicar , por lo que ver por sí mismo:Esquema borroso en un botón de formulario cuando se usa una imagen de fondo con un radio de 20px

http://zis.smartlyedu.com/login

no aparece en Mac OS, pero lo hace en Windows.

¿Alguien ha encontrado esto antes?

Aquí es el CSS para el botón:

div.input-submit input{ 
    outline:none; 
    font-family:Helvetica, Arial, sans-serif; 
    width:100px; 
    height:35px; 
    color:#fff; 
    font-weight:normal; 
    float:right; 
    font-size:18px; 
    text-shadow:#000 1px 1px 1px; 
    border:1px solid #fff; 
    -moz-border-radius:20px; 
    -webkit-border-radius:20px; 
    -o-border-radius:20px; 
    -ms-border-radius:20px; 
    -khtml-border-radius:20px; 
    border-radius:20px; 
    background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.2))); 
    background:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); 
    background:-moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); 
    background:-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); 
    background:-ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); 
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2)); 
    background-color:#31639d; 
    font-weight:bold; 
    border:1px solid #fff 
    }

Fuente

2011-09-24 Alain Meier

¿Qué navegadores? ¿El problema se solucionó después de aplicar 'outline: none;' (CSS) en el botón? –

@Rob W, dijo IE. Alain, ¿puedes publicar una captura de pantalla para aquellos de nosotros sin IE? –

Me pasa en Chrome, FF e IE9. Ya tengo un esquema: ninguno; en él, lamentablemente no es el problema –

Esta solución se ha encontrado a través de los comentarios en el post original.

Alain, agregue display: none al elemento de entrada para confirmar que el contorno se origina en el elemento de entrada. Si está seguro de la causa del origen, desactive todos los atributos CSS de los selectores que coincidan con su elemento y vuelva a agregarlos de forma individual. De esta manera, podrá encontrar la causa de su problema de CSS.

Jason McCreary respondieron:

Gracias, he intentado el método y descubrí que el problema fue con el borde de 1 píxel y la frontera de radio de 20 píxeles. Aparentemente en Windows, se asusta si se usan al mismo tiempo en un botón de envío. Para reparar , todo lo que hice fue quitar los bordes y reemplazarlos con borde: ninguno ;. Si eliminé el radio del borde, también funcionaría bien. ¡Gracias por la ayuda!

Fuente

2011-09-24 15:06:29

Esquema borroso en un botón de formulario cuando se usa una imagen de fondo con un radio de 20px

Respuesta

Cuestiones relacionadas