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