我有一个.less
样式表,其中包含用于自定义渐变的 mixin。当我用它创建几个渐变时,所有其他浏览器的规则都很好,但filter
旧 IE 浏览器的规则在第一次调用后不会改变。
这是一个简化的示例,我设法复制了我的问题:
.myGradient(@bg: rbg(255,255,255), @start: #FFFFFF, @end: #E6E6E6) {
background: @start;
background: -webkit-linear-gradient(top, @start 0%,@end 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@start, endColorstr=@end,GradientType=0 );
}
.one {
.myGradient(#ffa201,#ffa201,#ff7301);
}
.two {
.myGradient(#aaaaaa,#aaaaaa,#cccccc);
}
.three {
.myGradient(#ffffff,#ffffff,#000000);
}
下面是生成的 CSS lessc 1.3.0
:
.one {
background: #ffa201;
background: -webkit-linear-gradient(top, #ffa201 0%, #ff7301 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffa201, endColorstr=#ff7301, GradientType=0);
}
.two {
background: #aaaaaa;
background: -webkit-linear-gradient(top, #aaaaaa 0%, #cccccc 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffa201, endColorstr=#ff7301, GradientType=0);
}
.three {
background: #ffffff;
background: -webkit-linear-gradient(top, #ffffff 0%, #000000 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffa201, endColorstr=#ff7301, GradientType=0);
}
如您所见,webkit 渐变效果如预期,但 IE 始终保持橙色。有什么问题?