我们有一个基本上由三列组成的网站,每列都有通过线性渐变应用的不同颜色。虽然这在Firefox和Chrome中可以正常运行,但在IE8中会中断,例如,在远两列中背景为白色,左列的图像尺寸不正确(不确定是哪个CSS元素导致了该错误)。在Chrome中看起来很完美,但在IE8中却很糟糕。
该站点位于:http://clubsatcrp.com/walkingchallenge/
任何人都对解决此问题的解决方案有任何想法,并且至少使它在IE8中的列背景色方面看起来相同吗?很好,我不能解决问题,但是由于它是针对公司计划的,而我们公司使用的是IE8,所以这是一个问题。
这是CSS(线性渐变)的一部分:
background: -webkit-linear-gradient(
left,
#c63d11,
#c63d11 33.33%,
#CD0000 33.33%,
#CD0000 66.66%,
#000000 66.66%,
#000000
);
background: -moz-linear-gradient(
left,
#c63d11,
#c63d11 33.33%,
#CD0000 33.33%,
#CD0000 66.66%,
#000000 66.66%,
#000000
);
background: -ms-linear-gradient(
left,
#c63d11,
#c63d11 33.33%,
#CD0000 33.33%,
#CD0000 66.66%,
#000000 66.66%,
#000000
);
background: -o-linear-gradient(
left,
#c63d11,
#c63d11 33.33%,
#CD0000 33.33%,
#CD0000 66.66%,
#4e9dd1 66.66%,
#4e9dd1
);
最佳答案
如果即使在IE8上也需要3个等高的列,则可以使用display: table;
(和*-cell
)。
然后,您可以在每种颜色上定义背景颜色,并使用匹配的颜色来确保在所有情况下均可读(请参阅WCAG 2.0 F24 specifying foreground colors without specifying background colors or vice versa)
小提琴:http://jsfiddle.net/VbGap/
只需很少的努力就可以改进IE6和IE7上的渲染,但效果也不佳。
关于css - IE8兼容性和线性渐变,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10567046/