css按钮活动状态导致文本移动？ [英] css button active state causing text to move?

问题描述

因为某些原因，Firefox中最后的两个按钮（最新版本） ）将稍微移动文本，就好像在进入活动状态时实现点击动画一样。为什么第一个按钮也不会遇到这个问题？

下面的代码

 < fieldset style =width：320px ; float：left;> 
< legend>粉红色按钮< / legend> 
< button class =pinkbutton>< span> MESSAGE HERE< / span>< / button> 
< button class =pinkbuttondisableddisabled =disabled>< span> DISABLED< / span>< / button> 
 
< / fieldset> 
 
< fieldset style =width：320px; float：left;> 
< legend>灰色按钮< / legend> 
< button class =greybutton>< span> MESSAGE HERE< / span>< / button> 
< button class =greybuttondisableddisabled =disabled>< span> DISABLED< / span>< / button> 
 
< / fieldset> 
 
< fieldset style =width：320px; float：left;> 
< legend>白色按钮< / legend> 
< button class =whitebutton>< span> MESSAGE HERE< / span>< / button> 
< button class =whitebuttondisableddisabled =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;} 
  

任何帮助将非常感谢

解决方案

显示在：active状态有一些填充。我添加了'padding：0;'到初始css声明（以便它是继承而不管状态），它修复了问题。

请参阅 jsfiddle 。

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

I'm just working on some rough examples for a new site i'm working on.

for some reason the later 2 of these buttons in firefox(latest) will move the text slightly as if implementing a click animation as they enter the active state. why would the first button not also be experiencing this issue?

code below

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

.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;}

any help would be greatly appreciated

解决方案

Appears there's some padding on the :active state. I added 'padding: 0;' to the initial css declarations (so that it's inherited regardless of state) and it fixed the issue.

Please see this jsfiddle.

I don't know why it happened on only the last 2 buttons though.

这篇关于css按钮活动状态导致文本移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！