如何让我的 CSS 线性渐变在 IE 中工作？答案

【问题标题】：How do I get my CSS linear gradient to work in IE?如何让我的 CSS 线性渐变在 IE 中工作？
【发布时间】：2014-04-08 03:50:46
【问题描述】：

我有一个链接，我想让它看起来像一个带有圆角和渐变填充的按钮。它在 Chrome 中运行良好，但在 IE 中不行。

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

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

【问题讨论】：

您希望它在哪个版本的 IE 中工作？在 IE10 Consumer Preview 中按原样工作。
IE 8 和 9。如果 IE 7 和之前的版本看起来不完全相同，我可以。

标签： css

【解决方案1】：

您需要使用 Microsoft 过滤器：

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

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

查看规格：
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

【讨论】：

我正要这么说。不应该是Gradient 而不是gradient 吗？例如filter:progid:DXImageTransform.Microsoft.Gradient? (Gradient Filter)
我不确定我是否认为它可以双向工作，但根据规格，您在技术上是正确的......谢谢！
这看起来和我的 CSS 中的完全一样。有什么我想念的吗？我将您的代码复制到我的 JS Fiddle 项目中，但仍然无法正常工作。
嗯？我对你的 JS Fiddle 很感兴趣。当我将更改为
时，它似乎起作用了。只需这样做，它就可以工作。但我完全不知道为什么它不适用于。你可以看看规范，但我也这样做了，它似乎没有提供任何明显的解决方案：msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx
我自己没有尝试过，但是display: block; 或display: inline-block; 可以为<a> 工作吗？

【解决方案2】：

我知道这个问题已经很老了，但是由于它没有得到解答，如果这可以帮助人们，这是我在所有市长浏览器中获得线性渐变的解决方案：

/* 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

【讨论】：

我知道这个答案已经很老了，但我只想说声谢谢。

【解决方案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;
}

【讨论】：