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上的渲染可以轻松改进，但也不会渲染。

IE8兼容性和线性渐变

1 个答案: