css按钮激活状态导致文本移动?
我正在为一个新网站做一些粗略的例子 由于某些原因,firefox(最新版本)中后面的两个按钮会稍微移动文本,就像在它们进入活动状态时执行单击动画一样。为什么第一个按钮没有遇到此问题 代码如下css按钮激活状态导致文本移动?,css,html,firefox,cross-browser,Css,Html,Firefox,Cross Browser,我正在为一个新网站做一些粗略的例子 由于某些原因,firefox(最新版本)中后面的两个按钮会稍微移动文本,就像在它们进入活动状态时执行单击动画一样。为什么第一个按钮没有遇到此问题 代码如下 <fieldset style="width:320px; float:left;"> <legend>Pink Button</legend> <button class="pinkbutton"><span&g
<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>
如果您有任何帮助,我们将不胜感激。在:活动状态上似乎有一些空白。我添加了“padding:0;”对最初的css声明进行修改(这样无论状态如何,它都会被继承),并解决了这个问题 请看这个
我不知道为什么它只发生在最后两个按钮上。詹姆斯·希利解决方案效果很好。 我只是想澄清一下,这三个按钮都有同样的问题,只是一种“视觉效果”让它们看起来不像。这里有一个问题,我刚刚将.pinkbutton:active的文本颜色更改为#FFF
.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;}