IE8兼容性和線性梯度

我們有一個基本上是三列的網站，每個網站都通過線性漸變應用不同的顏色。雖然這在Firefox和Chrome中運行正常，但它在IE8中中斷，例如背景在最左邊的兩列中是白色的，左側列中的圖片大小不正確（不確定哪個CSS元素負責打破該區域）。它在Chrome中看起來很完美，但在IE8中很糟糕。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 
    );

來源

2012-05-12 Nietzsche

[CSS3跨瀏覽器線性漸變]的可能重複（http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient） –

'-ms-linear-gradient'是一個IE10功能。在此之前，必須使用'filter'屬性。這完全覆蓋了[標記重複]（http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient）。 –

我認爲有一個更好的方法，因爲我們實際上並不需要漸變，但是具有特定寬度的兩種純色（33.33％，66.66％）。漸變過濾器的行爲並不像我想要的那樣。思考？ – Nietzsche

如果需要甚至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可以只需很少的努力就可以得到改善，但效果並不理想。

來源

2012-05-12 21:10:17 FelipeAls

任何原因爲什麼背景顏色，如在你的例子中，只會在頁面的一半？每列的底部是白色的。 IE8和IE9似乎有這個問題。 – Nietzsche

你需要100％身高的父母（「身體」或其他）。不知道它是否來自JSFiddle中的iframe，或者如果它是我真的不習慣這個;） – FelipeAls

太好了，謝謝。我也不習慣這個，因爲我更喜歡在這一點上不支持IE8 ...... – Nietzsche

IE8兼容性和線性梯度

回答

相關問題