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

Question

样品：

<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（最新版本）

单击按钮（激活）时，按钮文本向右移动。如何预防？

Answer 1

作为解决方案之一：为padding:0

添加button:active

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

button:active {
  padding: 0px;
}

<button>Button</button>

或者您可以在span添加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;
}

button:active {
  padding: 0px;
}

<button><span>Button</span></button>

Answer 2

如果文字向右移动 - 向左移动按钮，那么文字将保留在他的位置：

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

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

Answer 3

添加重置css

    *{margin:0; padding:0;}

Demo