Question

我使用一些CSS作为按钮的背景，但它在Firefox，Chrome和IE中看起来有所不同。

我正在使用-webkit-linear-gradient和-moz-linear-gradient，但它们不起作用; Firefox中的背景很暗，Chrome中的背景是白色的。

.list-link a {
    background:-webkit-gradient(linear,,color-stop(#696969,0),color-stop(#3D3D3D,0.5),color-stop(#292929,0.5),color-stop(#171717,1));
    background:-webkit-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:-moz-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:-o-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    border:1px solid #000000;
    -webkit-border-radius:5px 5px 5px 5px;
    -moz-border-radius:5px 5px 5px 5px;
    border-radius:5px 5px 5px 5px;
    -webkit-box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    -moz-box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    color:#FFFFFF;
    cursor:pointer;
    display:inline-block;
    font-weight:normal;
    height:auto;
    padding:6px 17px;
    text-align:center;
    text-shadow:none;
}

Answer 1

This generator应该为您生成正确的跨浏览器代码。

您可以使用生成的css字段集右下角的 import from css 按钮。对于您的代码，这是输出：

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

Answer 2

Jan指出。 That generator会帮助你。如果你点击右下方的'导入CSS'按钮，你可以粘贴工作的mozilla CSS，它会输出所有其他的。

具体来说，你''Chrome'声明缺少正确的位置信息。您似乎需要... linear, left top, left, ...，如下所示。

background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(50%,#3d3d3d), color-stop(50%,#292929), color-stop(100%,#171717));

不同的结果是-webkit-linear-gradient和-moz-linear-gradient

2 个答案: