Html 线性渐变在 IE 11 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26522101/
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
Linear-gradient not working in IE 11
提问by bruce
I have a css rule that works fine in chrome, firefox and used to work in IE. Now my seemingly valid css is not working.
我有一个 css 规则，它在 chrome、firefox 中工作正常，并且曾经在 IE 中工作。现在我看似有效的 css 不起作用。
.s-tour {
/*border-radius: 5px;*/
margin: 0 auto;
width: 250px;
height: 200px;
line-height: 100px;
font-weight: 600;
font-size: 18px;
box-shadow: 0 0 7px rgba(1, 1, 1, .8);
border: solid thin #555;
color: #E0E0E0;
background: #555;
background-image: linear-gradient(to bottom, #555 0%, #eee 100%);
background-image:-webkit-linear-gradient(top, #777, #666);
background-image: -ms-linear-gradient(top,#555555 0%,#666666 100%);
background-image:-o-linear-gradient(top, #777, #666);
background-image:-moz-linear-gradient(top, #777, #666);
}
I feel like both background-image: linear-gradient(to bottom, #555 0%, #eee 100%);or -ms-background-image: linear-gradient(top,#555555 0%,#666666 100%);should be working for IE 11 yet the the IE inspector puts a fuzzy red line under it and anything else I try.
我觉得两者都background-image: linear-gradient(to bottom, #555 0%, #eee 100%);或-ms-background-image: linear-gradient(top,#555555 0%,#666666 100%);应该为 IE 11 工作，但 IE 检查器在它下面放了一条模糊的红线，我尝试了其他任何东西。
I checked a working gradient on a google page and background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);was working fine, yet even that exact line would not work on my site.
我在谷歌页面上检查了一个工作渐变并且background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);工作正常，但即使是那条确切的线在我的网站上也不起作用。
I've tried all variations I can think of in terms of property,prefix and values, including every relevant answer on stack overflow and am now stumped, wondering if it is a DOM issue or bug or something simple.
我已经尝试了所有我能想到的关于属性、前缀和值的变体，包括关于堆栈溢出的每个相关答案，现在我很困惑，想知道这是一个 DOM 问题还是错误或简单的东西。
回答by xzegga
try adding this line to the end of your class:
尝试将此行添加到您的课程末尾：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#666666);
回答by bruce
So the problem I really had was that I was not telling IE to render the page using the latest standards of css.
Adding <meta http-equiv="X-UA-Compatible" content="IE=Edge" />to the <head>block fixed most of my problems.
所以我真正遇到的问题是我没有告诉 IE 使用最新的 css 标准来呈现页面。添加<meta http-equiv="X-UA-Compatible" content="IE=Edge" />到<head>块解决了我的大部分问题。
回答by eMike Wallace
What has worked for me in IE11 is to correctly use the CSS3 linear-gradient property (http://www.w3schools.com/css/css3_gradients.asp)
在 IE11 中对我有用的是正确使用 CSS3 linear-gradient 属性（http://www.w3schools.com/css/css3_gradients.asp）
An example:
一个例子：
background: linear-gradient(to bottom, #FFF 0%, #EEE 100%);
After that I didn't need to use any meta tags or old filter syntax.
之后，我不需要使用任何元标记或旧的过滤器语法。
回答by Jason Vasilev
Using 180deginstead of topsolved the same problem for me.
使用 180deg而不是top为我解决了同样的问题。
Previously tried filterand already had <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
以前尝试过filter并且已经有了<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
