线性渐变在 IE 11 中不起作用答案

【问题标题】：Linear-gradient not working in IE 11线性渐变在 IE 11 中不起作用
【发布时间】：2019-09-02 17:40:57
【问题描述】：

我有一个在 chrome、firefox 中运行良好的 css 规则，并且曾经在 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);
}

我觉得 background-image: linear-gradient(to bottom, #555 0%, #eee 100%); 或 -ms-background-image: linear-gradient(top,#555555 0%,#666666 100%); 都应该适用于 IE 11，但 IE 检查器在它下面放了一条模糊的红线，我尝试了其他任何东西。

我在谷歌页面上检查了一个工作渐变，background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1); 工作正常，但即使是那条确切的行在我的网站上也不起作用。

我已经尝试了所有我能想到的关于属性、前缀和值的变体，包括堆栈溢出的所有相关答案，现在我很困惑，想知道这是 DOM 问题还是错误或简单的东西。

【问题讨论】：

可以使用this site生成css gradient

标签： html css internet-explorer

【解决方案1】：

尝试将此行添加到课程的末尾：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#666666);

【讨论】：

这行得通。我很惊讶，我以为这是 IE pre 10 语法
我只能在将颜色括在单引号中后才能使其工作，例如 'filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#666666');` +1

【解决方案2】：

所以我真正遇到的问题是我没有告诉 IE 使用最新的 css 标准来呈现页面。将<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 添加到<head> 块解决了我的大部分问题。

【讨论】：

【解决方案3】：

在 IE11 中对我有用的是正确使用 CSS3 线性渐变属性 (http://www.w3schools.com/css/css3_gradients.asp)

一个例子：

background: linear-gradient(to bottom, #FFF 0%, #EEE 100%);

之后我就不需要使用任何元标记或旧的过滤器语法了。

【讨论】：

【解决方案4】：

使用180deg 而不是top 为我解决了同样的问题。

以前试过filter，已经有<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

【讨论】：