IE中的CSS渐变不同于按钮而不是链接

时间:2012-12-12 05:12:54

标签: internet-explorer css

我有这个使用渐变样式的CSS类:

.zui-btn
{
padding:5px 15px; margin:0; border:1px solid #ccc;text-shadow: 0px 1px #fff; text-align:center;
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd));
background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#dddddd 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#dddddd 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#dddddd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');  
}

我将它应用于链接和按钮。但结果并未通过IE8,IE9中的链接。见http://jsfiddle.net/88mSc/14/

<a href="#" class="zui-btn">Modify</a>    
<button type="button" class="zui-btn">Hello World</button>

enter image description here

我做错了什么?

1 个答案:

答案 0 :(得分:2)

通过将显示设置为inline-block,这是一个可以解决的错误。

不要问我为什么。