Question

我有以下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/

Answer 1

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/

Answer 2

我添加了border-bottom: none并为我修复了它。当我删除你的颜色声明时，我看到它删除了白色条，所以我认为它与文本有某种关系。我不确定究竟是为什么，但我只是搞砸了不同的东西，直到我被删除。我认为它最初是强调的，但我看到它已经存在了。

Answer 3

我相信这一行

background: linear-gradient(top,

应该是

background: linear-gradient(to bottom,

但我不是100％肯定 - 如果没有道歉！

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

为什么这个渐变不能覆盖整个元素？

3 个答案: