0

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

1 回答 1

0

如果即使在 IE8 上也需要 3 列等高，则可以使用display: table;(and *-cell)。
然后，您可以在每个上定义背景颜色，并使用匹配的颜色以确保它在所有情况下都可读（请参阅 WCAG 2.0 F24指定前景色而不指定背景色，反之亦然）

小提琴：http: //jsfiddle.net/VbGap/

在 IE6 和 IE7 上的渲染可以毫不费力地改进，但它不会渲染得那么好。

于 2012-05-12T21:10:17.400 回答