Question

我有一个box，我正在尝试添加一些渐变，它可以在Chrome和其他浏览器中使用，除了IE10 +以下是我的CSS代码：

.box-gradient {
position:absolute;
width:100%;
height:100%;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:5px;
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));   
}

提前致谢!!

Answer 1

您必须为IE10 +

添加一行

background: -ms-linear-gradient(to left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);

我以前遇到过这个问题。增加渐变的兼容性可能是一项非常艰巨的工作。我认为您更喜欢使用 gradient generator

Answer 2

IE10需要一个无前缀的线性渐变来读取。像这样：

background: linear-gradient(to left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);

Answer 3

您还需要添加一个未加前缀的版本：

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -o-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: linear-gradient(to right, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);

有很多tools可用于帮助您处理各种前缀。

CSS Gradient不工作IE10 +

3 个答案: