1

我有以下CSS：

<a class="button">
    <span>Y</span>
</a>

    .button {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
    background-color: #206CAF;
    background: -moz-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%) repeat scroll 0 0 #206CAF;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.1)),color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%) repeat scroll 0 0 #206CAF;
background: -o-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
background: linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
    border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2);
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: none none solid;
    border-width: 0 0 1px;
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.15);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    outline: 0 none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}

在 chrome 和 safari（mac 和 windows）和 IE 9（windows）上时，整个框不会被渐变覆盖，并且底部有一些空白区域。我的代码有问题还是应该是这样？

在这里看小提琴：http: //jsfiddle.net/VmTks/

4

3 回答 3

2

IE/Chrome/Safari 和 Firefox 之间的差异是由这条规则造成的：

border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2);

您需要删除-moz前缀属性，并且行为将在浏览器中保持一致。Chrome、Safari（我假设是 IE）毫不奇怪地将该规则视为无效。border-color您可以通过带有删除线的属性在 Chrome 的开发者工具中看到这一点。

http://jsfiddle.net/VmTks/4/

于 2013-06-07T22:51:21.867 回答
2

我添加border-bottom: none并为我修复了它。当我删除您的颜色声明时，我看到它删除了白条，所以我认为它与文本有关。我不知道确切的原因，但我只是弄乱了不同的，直到我被删除。起初我以为它是下划线，但我看到它已经在那里了。

于 2013-06-07T22:52:16.570 回答
1

我相信这条线

background: linear-gradient(top,

应该

background: linear-gradient(to bottom,

但我不是 100% 确定 - 如果不是，请道歉！

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

于 2013-06-07T23:00:20.043 回答