CSS Gradient Handling in Internet Explorer

Question

I have a style that will give all the "buttons" of gradient backgrounds. In gotcha, not all buttons are actually buttons, some are links that look like buttons.

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

I applied the following styles to these:

 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 */ 

The problem is here. IE 7-9 will apply the gradient to the <input> elements, but not to the <a> element. All other browsers work. Is there a fix to force IE to give <a> tag gradients?

You can check and see the results here, only IE makes the latter not have a gradient. jsfiddle.net

Answer 1

The display:inline-block setting fixed the gradient for me in IE 6, 7 and 8.

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

I am not sure why, perhaps this is due to hasLayout, I hope someone can come and explain.

There is still some inconsistency with borders in IE6 and 7, which seem to be unrelated.

Answer 2

To apply filters to an element, it must hasLayout . Personally, I use zoom:1 .