“线性渐变”在IE9和Safari中不起作用

Question

I try to apply a style to a button but this style displays well on Mozilla and Chrome then it is not the case for Safari and IE9.

Here is the 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;
}

But when i inspect the button , i find in quoted of the property linear-gradient a yellow exclamation mark which indicates that this property is not recognized by the browser (safari or IE9)

Any idea to solve this issue?

Answer 1

For Safari, you will have to put an additional, so-called "vendor-prefixed" version of the definition:

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

For IE9 (which has no support for CSS gradients) you must use an image as a fallback, either png/gif/jpg, or better SVG.

Here is one of many gradient generators that also creates the SVG you want:

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