在 Chrome 中单击按钮答案

【问题标题】：button clicking in Chrome在 Chrome 中单击按钮
【发布时间】：2013-04-13 15:22:28
【问题描述】：

我在 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 都可以正常工作。

【问题讨论】：

看起来点击时唯一的变化应该是背景——为什么文本会移动？另外，我们是否可以假设您将此类应用到 button 元素（而不是 div，它没有“活动”状态）？

标签： html google-chrome css button

【解决方案1】：

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

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

【讨论】：

你是对的，我需要 Firefox 和 Chrome 的相同效果。我如何做到这一点？

【解决方案2】：

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

padding:3px;

这样你会看到一个动作并且你可以调整它

【讨论】：