html - 如何保持浏览器与 css 中 Gradient 的兼容性？

Question

我正在使用 html 、 css 和 javascript 开发一个网站。这些按钮在每个浏览器中的显示方式都不同。以下是同一页面不同浏览器的截图:

互联网浏览器:

火狐:

我实际上想让它像在 firefox 中显示的那样显示。这是我正在使用的一些 css 代码:

#button{
float: left;
width: 500px;
height: 50px;
line-height: 50px;
background-color: #06C;
padding-left: 20px;

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #60B842),
    color-stop(0.85, #7FD13D)
);
background-image: -moz-linear-gradient(
    center bottom,
    /* change these to change the button colors */
    #B58515 0%,
    #DC9E1F 85%
);

/* change this to change the text color and font type */
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
text-shadow:1px 1px 1px #4c9434;
    }

    #button:hover{
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #6DD14B),
    color-stop(0.85, #85DB40)
);
background-image: -moz-linear-gradient(
    center bottom,
    /* change these colors to change the mouse hover colors */
    #E17100 0%,
    #FF9326 85%
);
box-shadow:0 2px 0 #5EA839;
    }

使用渐变可能存在一些问题。有人可以建议我进行任何更改或其他编码方式，以便网页在不同浏览器中看起来相同吗？

Answer 1

我通常使用Colorzilla's Ultimate CSS Gradient Generator生成跨浏览器 CSS 渐变代码。