背景圖像漸變不與ie9一起使用

Question

似乎以下代碼不適用於ie9。 有解決方法嗎？ 謝謝

.orangeback {
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF6900), color-stop(1, #FF8214));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FF6900 0%, #FF8214 100%);
}

Answer 1

嘗試

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/

如果有效，請告訴我。

Answer 2

這非常接近：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff6900', endColorstr='#ff8214',GradientType=0 );

這適用於IE6 +。

或者，對於JUST IE9，如果filter選項不浮動您的船，您可以使用以下樣式將其替換為SVG：

添加到.orangeback ：

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjgyMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

還要為這些元素添加.ie9-gradient類，並在結束head標記之前添加以下內容：

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

要在IE9中使用SVG polyfill用於CSS3漸變，您需要禁用過濾器，因此此代碼保留IE6-8的filter漸變回退並使用SVG用於IE9。

在您的情況下，實際上不需要為IE9使用SVG polyfill，因為您使用的是普通的2色線性漸變。 如果你有一個更復雜的梯度，第二個解決方案可能更可取，但為了你的目的，只使用filter解決方案應該工作正常。

使用此（或CSS預處理器），再也不用擔心CSS3漸變： Colorzilla Gradient Generator