css - IE8兼容性和线性渐变

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