如何在Firefox中的按钮处于活动状态时防止按钮文字移动？

样品：

<button>Button</button>


button {
    border: medium none;
    margin-top: 17px;
    width: 224px;
    height: 40px;
    background: none repeat scroll 0% 0% #7BA6BB;
    color: #FFF;
    outline: medium none;
    cursor: pointer;
}

http://codepen.io/anon/pen/ByaLZN

浏览器：Mozilla Firefox（最新版本）

点击按钮（激活）后，按钮文本向右移动。 如何防止它？

---

http://jsfiddle.net/reg8f6eo/作为解决方案之一：添加padding:0为button:active

或者你可以添加span （或者你喜欢的其他标签）到你的button像这样http://jsfiddle.net/reg8f6eo/1/

---

如果文本正在向右移动 - 向左移动按钮，则文本将保持在他的位置：

http://jsfiddle.net/goc68jy4/2/

button {
  ...
  padding:0px;
}
button:active{
    margin-left:-2px;
    padding-left:4px;
}

---

添加重置CSS

    *{margin:0; padding:0;}

演示

链接地址: http://www.djcxy.com/p/23479.html

上一篇: How to prevent button text movement when button is active in Firefox?

下一篇: Version 6.0 (6A313) crash when refreshing provisioning profiles