Internet Explorer CSS渐变处理

Question

我已经创建了一个样式,它将为所有"按钮"提供渐变背景.问题并非所有按钮实际上都是按钮,有些按钮的风格看起来像按钮.

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

对于这些我已经应用了以下样式:

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

问题在这里找到.IE 7-9将梯度应用于<input>元素,但不应用于<a>元素.所有其他浏览器工作.有没有修复让IE给<a>标签渐变？

你可以在这里测试和查看结果,只有IE导致最后一个没有渐变.jsfiddle.net

Answer 1

设置display:inline-block修复了 IE 6、7 和 8 中的渐变。

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

我不确定为什么，这可能与 hasLayout 有关，希望有人能过来解释一下。

IE6 和 7 中的边框仍然存在一些不一致的情况，这似乎并不相关。