当 Firefox 中的按钮处于活动状态时，如何防止按钮文本移动？答案

【问题标题】：How to prevent button text movement when button is active in Firefox?当 Firefox 中的按钮处于活动状态时，如何防止按钮文本移动？
【发布时间】：2015-01-10 13:33:04
【问题描述】：

示例：

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

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

【问题讨论】：

你不妨注意你的语言。这是一个问答网站，而不是你每天的愤怒论坛。
Bram Yanroy，是的，这里是问答网站，不是讨论我的问题频率的论坛。
css button active state causing text to move?的可能重复
添加padding: 0; 解决了重复中所示的问题
Bram Yanroy，短语“你不妨注意你的语言。”是民族歧视。该网站可供所有人访问。

标签： html css firefox cross-browser

【解决方案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;
}

&lt;button&gt;Button&lt;/button&gt;

或者你可以在这里添加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;
}

&lt;button&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

添加重置 css

    *{margin:0; padding:0;}

Demo

【讨论】：

您的回答建议删除可能出现在页面上的所有元素的边距和填充，而不是特定的目标元素。