html - 当按钮在 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

作为解决方案之一:为 button:active 添加 padding:0

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>