防止 <button> 在 IE 中单击期间移动答案

【问题标题】：Prevent <button> from shifting during click in IE防止 <button> 在 IE 中单击期间移动
【发布时间】：2012-05-05 13:07:44
【问题描述】：

当您在页面中有一个简单的元素并在 IE8/9 中单击它（单击过程中按住鼠标查看效果）时，按钮会向下和向右移动一点。

我假设这是默认 IE 样式的一部分。有没有办法阻止这种行为？

【问题讨论】：

【解决方案1】：

您可以对按钮应用一些样式。按钮{边距：0px;填充：0px;}

【讨论】：

【解决方案2】：

您可以在 IE 按钮中停止文本移动：

button:active span, button:focus span {
    position:relative;
    top: 0;
    left: 0;
}

<button><span>no move</span></button>

【讨论】：

这里的关键是针对按钮的子元素，而不是按钮本身。这是暗示的，但没有在答案中明确说明。您也可以将其应用于伪元素：button:active::before 等。
@gfullam 谢谢老兄！伴随答案的那一点信息对我有帮助。
正如@teefars 在他的回答中指出的那样，您似乎只需要position: relative，不需要设置顶部/左侧，至少在 IE11 中是这样

【解决方案3】：

把你的文字放在<span>和position:relative里面，它会修复的。

button span{
    position: relative;
}

不需要top和left定义。

【讨论】：

【解决方案4】：

如果您不介意使用 JavaScript，显然这可以解决问题：

$(document).on('mousedown', 'button, input[type="button"], input[type="submit"]', function(e) {
  e.preventDefault();
});

【讨论】：