Internet Explorer CSS gradient handling
I've got a style created which will give all "buttons" gradient backgrounds. The gotcha is not all buttons are actually buttons, some are links which are styled to look like a button.
<input type="submit" value="submit" class="gradient" /><br />
<input type="button" value="button" class="gradient" /><br />
<a href="" class="gradient">Link</a>
To these I've applied the following styles:
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 issue is found here. IE 7-9 will apply the gradient to the <input> elements but NOT the <a> element. All other browsers work. Is there a fix to get IE to give <a> tags gradients?
You can test and see the results here, only IE causes the last to have no gradient. jsfiddle.net
Setting display:inline-block fixed the gradient for me in IE 6, 7, and 8.
http://jsfiddle.net/wSuJj/3/
I'm not sure why, it might have to do with hasLayout, hopefully someone can come along and explain.
There's still some inconsistency with the borders in IE6 and 7 as well that doesn't seem to be related.
To apply filters to element, it has to hasLayout . Personally, I use zoom:1 .
上一篇: 沿路径使用渐变