我有一个链接,我想要看起来像一个按钮与圆角和渐变填充.它在Chrome中正常工作,但不能在IE中运行.
我发现如果我设置display：inline-block,它会显示渐变,但是会删除圆角.有没有人知道如何解决这个问题在IE？
HTML：
<a href="" class="button-gold-med">Hello World</a>
CSS：
a {
color: white;
padding: 8px;
background: #7db9e8;
background: -webkit-gradient(linear,left top,left bottom,from(#7db9e8),to(#1e5799));
background: -webkit-linear-gradient(top,#7db9e8,#1e5799);
background: -moz-linear-gradient(top,#1e5799);
background: -ms-linear-gradient(top,#1e5799);
background: -o-linear-gradient(top,#1e5799);
background: linear-gradient(top,#1e5799);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8',endColorstr='#1e5799',GradientType=0);
zoom: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-Box;
background-clip: padding-Box;
}
解决方法
您需要使用Microsoft筛选器：
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#7db9e8',endColorstr='#1e5799');
使用它作为IE的回退 – 它在大多数版本中起作用.
参见规格：
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
