El color de fondo del tipo de entrada = botón: hover palos estatales en IE

tengo un tipo de entrada botón con un color de fondo establecido y una diferente en =: hover - ver http://jsfiddle.net/hc2Eu/3/El color de fondo del tipo de entrada = botón: hover palos estatales en IE

En IE (todas las versiones) - cuando Hago clic con el mouse sobre el botón, me muevo fuera del botón y luego me desplazo hacia arriba: el color de fondo permanece en la configuración de: desplazamiento hasta que lo vuelves a pasar.

¿Hay alguna solución para esto? Preferiblemente no con js? (IE6 no es necesario)

Fuente

2011-04-11 ScottR

Puede haber una solución a <input type="button"> - pero si lo hay, don no lo se

De lo contrario, una buena opción parece ser reemplazarlo por un elemento cuidadosamente diseñado a.

Ejemplo: http://jsfiddle.net/Uka5v/

.button { 
    background-color: #E3E1B8; 
    padding: 2px 4px; 
    font: 13px sans-serif; 
    text-decoration: none; 
    border: 1px solid #000; 
    border-color: #aaa #444 #444 #aaa; 
    color: #000 
}

Upsides incluyen que el elemento a será el estilo de forma consistente entre las diferentes versiones (mayores) de Internet Explorer sin ningún trabajo adicional, y creo que mi enlace se ve mejor que el botón :)

Fuente

2011-04-11 23:12:18 thirtydot

Había pensado en eso, pero estoy lidiando con un sistema preexistente que tenía lógica asignada a los elementos de entrada, y presentaciones de formularios, etc. (no pida detalles :) Refactorizar todo ese código solo para arreglar un IE fallo puede no valer la pena. – ScottR

Le doy la respuesta aceptada, porque no creo que esto sea posible con los elementos de botón estándar. – ScottR

Los degradados y las transiciones no funcionan juntas parece ser la única respuesta: http://stackoverflow.com/questions/3790273/webkit-support-for-gradient-transitions –

Trate de usar el selector type atributo para encontrar los botones (tal vez esto va a solucionarlo también):

input[type=button] 
{ 
    background-color: #E3E1B8; 
} 

input[type=button]:hover 
{ 
    background-color: #46000D 
}

Fuente

2011-04-11 23:01:07 Blender

No es un problema de selección de CSS: los colores se aplican correctamente. Hay algunos problemas con mover el mouse fuera de un botón cuando está en el estado activo - el mismo problema con

Hmm. Supongo que es hora de ganarle a la computadora y gritar obsceneties, ya que no estoy seguro de cómo engañar a IE para que haga esto. – Blender

Debe asegurarse de que las imágenes sean lo primero y poner una coma después de la llamada de la imagen de fondo. entonces realmente funciona:

background:url(egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */ 
background:url(egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */ 
background:url(egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */ 
background:url(egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */ 
background:url(egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */ 
background:url(egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0); /* IE6-9 */ 
background:url(egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */

Fuente

2011-06-08 04:33:37

El color de fondo del tipo de entrada = botón: hover palos estatales en IE

Respuesta

Cuestiones relacionadas