如何让我的 CSS 线性渐变在 IE 中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10924632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get my CSS linear gradient to work in IE?
提问by Brian
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 中解决这个问题吗？
HTML:
HTML：
<a href="" class="button-gold-med">Hello World</a>?
CSS:
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;
}
回答by sissypants
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
回答by Jhollman Cutcsa
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:
还有一个单独的工具来创建这个 CSS 渐变，在这里查看：
http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
回答by Oliver
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;
}
