线性渐变在IE 11中不起作用 [英] Linear-gradient not working in IE 11

问题描述

我有一个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或简单的东西.

解决方案

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

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

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.

.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.

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.

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.

解决方案

try adding this line to the end of your class:

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

这篇关于线性渐变在IE 11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！