IE8 兼容性和线性渐变

Question

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

Answer 1

如果即使在 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 上的渲染可以毫不费力地得到改进，但渲染效果不佳。