css按钮活动状态导致文本移动？答案

【问题标题】：css button active state causing text to move?css按钮活动状态导致文本移动？
【发布时间】：2012-06-11 11:05:02
【问题描述】：

我只是在为我正在开发的新网站编写一些粗略的示例。

由于某种原因，firefox(latest) 中的后两个按钮会稍微移动文本，就像在它们进入活动状态时实现点击动画一样。为什么第一个按钮也不会遇到这个问题？

代码如下

<fieldset style="width:320px; float:left;">
        <legend>Pink Button</legend>
            <button class="pinkbutton"><span>MESSAGE HERE</span></button>
            <button class="pinkbuttondisabled" disabled="disabled"><span>DISABLED</span></button>

    </fieldset>

    <fieldset style="width:320px; float:left;">
        <legend>Grey Button</legend>
            <button class="greybutton"><span>MESSAGE HERE</span></button>
            <button class="greybuttondisabled" disabled="disabled"><span>DISABLED</span></button>

    </fieldset>

    <fieldset style="width:320px; float:left;">
        <legend>White Button</legend>
            <button class="whitebutton"><span>MESSAGE HERE</span></button>
            <button class="whitebuttondisabled" disabled="disabled"><span>DISABLED</span></button>

    </fieldset>

下面的css

.pinkbutton { border:1px solid #D2247b; width:150px; height:30px; background-color:#EF0093; color:#FFF;}
.pinkbutton:hover {border:1px solid #FF4296; background-color:#FF5EAC;}
.pinkbutton:active {border:1px solid #A61D61; background-color:#DC2F85; color:#333232;}
.pinkbuttondisabled {border:1px solid #F3C4DB; width:150px; height:30px; background-color:#FDC6E2; color:#FFF;}


.greybutton { border:1px solid #BBBBBB; width:150px; height:30px; background-color:#E2E2E2; color:#8d8c8c;}
.greybutton:hover {border:1px solid #EF0093; background-color:#E2E2E2; color:#f62c92;}
.greybutton:active {border:1px solid #696969; background-color:#BFBFBF; color:#424242;}
.greybuttondisabled {border:1px solid #D5D4D4; width:150px; height:30px; background-color:#F4F4F4; color:#d5d4d4;}

.whitebutton { border:1px solid #EF0093; width:150px; height:30px; background-color:#FFF; color:#EF0093;}
.whitebutton:hover {border:1px solid #898989; background-color:#FFF; color:#898989;}
.whitebutton:active {border:1px solid #898989; background-color:#E2E2E2; color:#979696;}
.whitebuttondisabled {border:1px solid #FAB2DE; width:150px; height:30px; background-color:#FFF; color:#FAB2DE;}

任何帮助将不胜感激

【问题讨论】：

标签： css html firefox cross-browser

【解决方案1】：

:active 状态似乎有一些填充。我添加了“填充：0；”到最初的 css 声明（以便无论状态如何都可以继承），它解决了这个问题。

请看这个jsfiddle。

我不知道为什么它只发生在最后 2 个按钮上。

【讨论】：

【解决方案2】：

James Healey 解决方案效果很好。 http://jsfiddle.net/pxx4V/ 我只是想澄清三个按钮有同样的问题，只是一种“视觉效果”让它们看起来没有。这是一个解决问题的方法，我只是将 .pinkbutton:active 的文本颜色更改为 #FFF http://jsfiddle.net/6L6yu/

【讨论】：