如何让我的CSS线性渐变在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.

我有一个链接,我想看起来像一个圆角和渐变填充按钮。它适用于Chrome,但不适用于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?

我发现如果我设置display:inline-block,它会显示渐变,但会删除圆角。有谁知道如何在IE中解决这个问题?

Demo in JSFiddle

JSFiddle中的演示

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;
}

3 个解决方案

#1

You need to use the Microsoft filter:

您需要使用Microsoft筛选器:

 filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#7db9e8', endColorstr='#1e5799');

Use that as a fallback for IE--it works in most versions.

使用它作为IE的后备 - 它适用于大多数版本。

See the specifications:
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

请参阅规范:http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

#2

I know this question is quite old, however since it is unaswered and if this can help people, here is my solution to get a linear Gradient working in all mayor Browsers:

我知道这个问题已经很老了,但是因为它没有答案,如果这可以帮助人们,这是我的解决方案,让所有市长浏览器都能使用线性渐变:

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,     #FFFFFF), color-stop(1, #BDBDBD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #BDBDBD 100%);

There is also an onlie tool to create this CSS gradients, chek it here:

还有一个onlie工具来创建这个CSS渐变,请点击此处:

http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

#3

Instead of using a filter, you can always fallback with an image:

您可以随时使用图片进行回退,而不是使用过滤器:

a {
    color: white;
    padding: 8px;

    background: #7db9e8;
    background: transparent url('gradient.png') 0 0 repeat;
    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);

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

#1