如何让我的CSS线性渐变在IE中工作? [英] How do I get my CSS linear gradient to work in IE?
本文介绍了如何让我的CSS线性渐变在IE中工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个链接,我想让它看起来像一个带有圆角和渐变填充的按钮。它工作正常在Chrome,但不是在IE。
I've got a link that I want to make look like a button with round corners and a gradient fill. It works fine in Chrome, but not in IE.
我发现如果我设置display:inline-block,它会显示渐变,但删除圆角。是否有人知道如何在IE中解决这个问题?
I've found that if I set display: inline-block, it shows the gradient, but removes the rounded corners. Does anybody know how to get around this issue in 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, #7db9e8, #1e5799);
background: -ms-linear-gradient(top, #7db9e8, #1e5799);
background: -o-linear-gradient(top, #7db9e8, #1e5799);
background: linear-gradient(top, #7db9e8, #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;
}
推荐答案
filter:
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#7db9e8', endColorstr='#1e5799');
使用它作为IE的后备工具 - 它在大多数版本中可用。
Use that as a fallback for IE--it works in most versions.
查看规格:
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
这篇关于如何让我的CSS线性渐变在IE中工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文