0

我在 Firefox 中制作了一个按钮，效果很好，但是在 Chrome 中单击按钮后文本没有移动，因此单击时没有按钮效果。我想为 Chrome 解决这个问题，但仍然不会弄乱 Firefox 的代码。

Demo

    .btn{
        background:-moz-linear-gradient(top,#64b24c 1%,#5ba045 31%,#509339 80%);
        background:-webkit-linear-gradient(top,#64b24c 1%,#5ba045 31%,#509339 80%);
        border:1px solid rgba(70,140,60,0.8);
        border-radius:3px;
        height:30px;width:80px;
        font-family:Corbel;font-weight:bold;font-size:16px;color:#FFF;
        text-shadow:rgba(3,3,3,0.8) 1px 1px 2px;
        padding-bottom:3px; /*bad*/
        padding:0px 0px 2px 0px; /*good*/
    }
    .btn:hover{cursor:pointer;}
    .btn:active{
        background:#509339; 
        padding:2px 0px 3px 1px; /*bad*/
        padding:0px 0px 0px 2px; /*good*/
}

问题是 Chrome 对 padding-left: 1px; 没有反应。我将其更改为 2px，Chrome 和 Firefox 一切正常。

4

2 回答 2

1

在我的 chrome (v26) 版本上，背景确实发生了变化，文本没有移动。我是否可以建议您从 btn 类的填充中删除 -bottom：

padding:3px;

这样你会看到一个动作，你就可以调整它

于 2013-04-13T15:28:52.980 回答
1

Chrome 的用户代理样式表有padding: 2px 6px 3px 6px按钮。因此，当您将其设置为 2px 时，您的顶部填充根本不会改变。

您可能希望显式覆盖未按下按钮的填充，以便无论浏览器设置如何都能获得相同的效果。

于 2013-04-13T15:33:46.400 回答