相关疑难解决方法(0)

我正在研究一些我正在研究的新网站的粗略示例.

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

代码如下

<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 …