IE9漸變未顯示

我在使用IE9中的CSS漸變時遇到問題。我準備好用圖像去做... UGGHHH向後移動我猜。IE9漸變未顯示

我用這個網站http://www.colorzilla.com/gradient-editor/創建我的梯度和它說，IE6-9支持使用此...

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); /* IE6-9 */

但它不是顯示IE9

這裏了是我的整個的CSS項

.orangeButton { 
width: 170px; 
height: 20px; 
padding: 3px 20px; 
text-align: center; 
color: #fff; 
border-radius: 3px; 
font-family: Arial; 
font-size: 14px; 
font-weight: bold; 
color: #fff; 
text-shadow: 1px 1px #ff4e00; 
text-decoration: none; 
background: #ffa70f; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffa70f 1%, #ff810f 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffa70f), color-stop(100%,#ff810f)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #ffa70f 1%,#ff810f 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa70f', endColorstr='#ff810f',GradientType=0); /* IE6-9 */ 
}

是否有另一種方法來做到這一點，從彩色Zilla中缺少。我讀過可以使用background-image的地方，這對IE9和之前的版本更好嗎？

來源

2013-10-03 Travis

梯度並不建議用，因爲它不具備完全支持所有瀏覽器。但是我建議你用自定義圖像替換漸變（你可以使用Photoshop創建漸變）。 – Yotam

@Yotam他提到了所有跨瀏覽器支持。並且使用photoshop圖片會讓它在響應式設計上看起來很怪異。 – vishalkin

@vishalkin只要你使用百分比和圖像大小，什麼都不會發生。 – Yotam

支持使用IE9（使用SVG）的完整多梯度漸變。添加一個「梯度」類所有的元素有一個梯度，下面覆蓋添加到您的HTML完成IE9支持：

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]-->

來源

2013-10-03 19:12:43 vishalkin

這個工作對於IE8或者只是9？我通常會測試它，但我沒有訪問IE8機器，但也只是有點好奇的後備可以用於舊版瀏覽器 – Travis

@Travis這是僅適用於IE9（實際上，我認爲只是9）。 – disinfor

不知道爲什麼，但沒有在我的例子中工作。不確定是否有人熟悉NetSuite，但可能導致這種情況不起作用，這是一個超級重的JS平臺。 – Travis

IE9漸變未顯示

回答

相關問題