如何让我的CSS线性渐变在IE中生效？

Question

我有一个链接，想要将其制作成带有圆角和渐变填充的按钮样式。在Chrome中运行良好，但在IE中无法正常显示。

我发现，如果设置display: inline-block，可以显示渐变，但是去掉了圆角。有人知道如何解决IE中的这个问题吗？

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

- Brian

---

你想让它在哪个版本的IE中运行？在IE10 Consumer Preview中，它的表现很好。 - uınbɐɥs

IE 8和9。如果IE 7及更早版本的浏览器外观不完全相同，我也没关系。 - Brian

Answer 1

我知道这个问题很久远，但是既然没有答案并且如果可以帮助人们，这是我在所有主要浏览器中实现线性渐变的解决方案:

/* 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%);

还有一个在线工具可以创建这个CSS渐变效果，点击这里查看：

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

- Jhollman Cutcsa

---

我知道这个答案很老了，但我只是想说谢谢。 - hdotluna

Answer 2

你需要使用微软过滤器:

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

在IE中将它用作备选方案——在大多数版本中都有效。

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

- zdebruine

---

我正要说那个。应该是 Gradient 而不是 gradient，比如 filter:progid:DXImageTransform.Microsoft.Gradient 吧？（渐变滤镜） - uınbɐɥs

我不确定，我以为它可以双向工作，但根据规格说明，你在技术上是正确的...谢谢！ - zdebruine

这看起来就像是我在我的CSS中所拥有的。我是否漏掉了什么？我将你的代码复制到我的JS Fiddle项目中，但它仍然无法工作。 - Brian

嗯？我调整了你的JS Fiddle。当我将<a>更改为<div>时，它似乎可以工作。只需这样做就可以了。但我绝对不知道为什么它不能用<a>。您可以查看规格说明，但我也这样做了，似乎没有明显的解决方案：http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx - zdebruine

我自己没有尝试过，但是display：block;或display：inline-block;适用于<a>标签吗？ - uınbɐɥs

Answer 3

如果不使用过滤器，您可以始终使用图像进行回退:

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

- Oliver