Manejo de gradientes CSS de Internet Explorer

Question

Tengo un estilo creado que dará a todos los fondos degradados de "botones". El gotcha no es todos los botones son en realidad botones, algunos son enlaces que se diseñan para parecer un botón.

<input type="submit" value="submit" class="gradient" /><br /> 
<input type="button" value="button" class="gradient" /><br /> 
<a href="" class="gradient">Link</a> 

A éstos He aplicado los siguientes estilos:

background-image: -moz-linear-gradient(top, #20799d, #5cb9df); /* FF3.6 */ 
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #20799d),color-stop(1, #5cb9df)); /* Saf4+, Chrome */ 
background-image: -webkit-linear-gradient(#20799d, #5cb9df); /* Chrome 10+, Saf6 */ 
background-image: linear-gradient(top, #20799d, #5cb9df); 
font-family: Arial, Helvetica, sans-serif; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr='#5cb9df'); /* IE6–IE9 */ 

El problema se encuentra aquí. IE 7-9 aplicará el degradado a los elementos <input> pero NO al elemento <a>. Todos los demás navegadores funcionan. ¿Hay alguna solución para que IE proporcione gradientes de etiquetas <a>?

Puede probar y ver los resultados aquí, solo IE hace que el último no tenga gradiente. jsfiddle.net

Answer 1

Configuración display:inline-block fija el gradiente para mí en IE 6, 7 y 8.

http://jsfiddle.net/wSuJj/3/

no estoy seguro de por qué, puede ser que tenga que ver con hasLayout, es de esperar que alguien pueda venir y explicar.

Todavía hay algunas inconsistencias con los bordes en IE6 y 7 que tampoco parecen estar relacionadas.

Answer 2

Para aplicar filtros al elemento, tiene que hasLayout. Personalmente, uso zoom:1.