jquery - HTML 按钮设计在所有浏览器中都具有渐变效果？

Question

我有以下 HTML 按钮样式。它在 Fire Fox 中工作正常，但在 IE 中无法正确渲染。我用的是IE7。但它应该适用于 7 以上的所有 IE 版本。

在FF中:

但在 IE 中它的外观有所不同:

下面是我的 CSS 样式:

button.skip {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #8C9CBF;
    background-image: -moz-linear-gradient(center top , #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%);
    border-color: #172D6E #172D6E #0E1D45;
    border-image: none;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 0 #B1B9CB inset;
    color: #FFFFFF;
    font: bold 16px/1 "helvetica neue",helvetica,arial,sans-serif;
    padding: 7px 0 8px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 1px #000F4D;
    width: 150px;

}

如何在 IE 中显示类似 FF 的按钮？谢谢!

Answer 1

试试这个:

-webkit-border-radius: 5px;
border-radius: 5px;

background: #8c9cbf; /* Old browsers */
background: -moz-linear-gradient(top,  #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c9cbf), color-stop(50%,#546a9e), color-stop(50%,#36518f), color-stop(100%,#3d5691)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 50%,#3d5691 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 50%,#3d5691 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 50%,#3d5691 100%); /* IE10+ */
background: linear-gradient(to bottom,  #8c9cbf 0%,#546a9e 50%,#36518f 50%,#3d5691 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c9cbf', endColorstr='#3d5691',GradientType=0 ); /* IE6-9 */