我们有一个基本上由三列组成的网站,每列都有通过线性渐变应用的不同颜色。虽然这在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/

10-12 00:22
查看更多