0

基本的に 3 つの列で構成された Web サイトがあり、それぞれに線形グラデーションを介して異なる色が適用されています。これは Firefox と Chrome では正常に機能しますが、IE8 では機能しません。たとえば、背景が 2 列目の端で白く、左の列の画像のサイズが適切に設定されていません (どの 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;（および*-cell）を使用できます。
次に、それぞれに背景色を定義し、すべての状況で確実に読み取れるように色を一致させることができます（背景色を指定せずに前景色を指定するWCAG 2.0 F24を参照） 。

フィドル： http： //jsfiddle.net/VbGap/

IE6およびIE7でのレンダリングは、わずかな労力で改善できますが、同様にレンダリングされません。

于 2012-05-12T21:10:17.400 に答える