Question

我有一个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);
}

我觉得background-image: linear-gradient(to bottom, #555 0%, #eee 100%);或-ms-background-image: linear-gradient(top,#555555 0%,#666666 100%);都应该为IE 11工作，但IE检查员会在它下面放一条模糊的红线以及我尝试的任何其他内容。

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

我已经尝试了所有我能想到的属性，前缀和值的变体，包括堆栈溢出的每个相关答案，现在我很难过，想知道它是DOM问题还是bug或简单的东西。

Answer 1

尝试将此行添加到班级的末尾：

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

Answer 2

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

Answer 3

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

一个例子：

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

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

Answer 4

使用180deg代替top为我解决了同样的问题。

先前尝试过filter并已经拥有<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

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

4 个答案: