"linear-gradient" 在 IE9 和 Safari 中不工作

Question

我尝试将样式应用于按钮，但此样式在 Mozilla 和 Chrome 上显示良好，但在 Safari 和 IE9 上却并非如此。

这里是 css class:

#bt_D{
width:130px;
height:30px;
box-shadow:1px 2px 4px rgba(0,0,0,0.60);
font-size:12px;
background-image:linear-gradient(60deg, rgb(231,110,49), rgb(231,171,49));
border:1px solid rgb(180,180,180);
border-radius:5px;
float:right;
text-align:center;
vertical-align:middle;
}

但是当我检查按钮时，我发现属性 linear-gradient 的引号中有一个黄色的感叹号，表示浏览器（safari 或IE9)

有解决此问题的想法吗？

Answer 1

对于 Safari，您必须添加一个额外的所谓 "vendor-prefixed" 版本的定义：

background-image: -webkit-linear-gradient(60deg, rgb(231,110,49), rgb(231,171,49));

对于 IE9（不支持 CSS 渐变），您必须使用图像作为后备，png/gif/jpg 或更好的 SVG。

这里是许多渐变生成器之一，它也可以创建您想要的 SVG：

http://www.colorzilla.com/gradient-editor/

"linear-gradient" 在 IE9 和 Safari 中不工作

"linear-gradient" not working in IE9 and Safari

html

css

safari

internet-explorer