IE11 在 :hover 和 :active 上将按钮文本移动一些 px

Question

采用下面的代码片段。

示例中的按钮在鼠标按下时应变为黑色 (:active) - 效果很好 - 但如果鼠标位于按钮上，IE11 还会将按钮文本向右下角移动一些像素 ( :hover)。您可以通过按下按钮并在按住鼠标的同时将鼠标从按钮上移开来看到这一点 - 按钮保持活动状态，但一旦光标离开按钮，文本就会移回：

所有其他浏览器（甚至 Edge）都可以正常工作。

因为在IE11的开发工具中只能应用:hover伪class，我不知道这种转变是从哪里来的。我已经尝试为按钮指定填充和边距但没有成功。

input[type="button"] {
  width: 200px;
  height: 3rem;
  
  background: #10275e;
  border: 1px solid white;
  color: white;
  
  font-size: 1.2rem;
}
  
input[type="button"]:hover {
  color: #10275e;
  background: white;
}
  
input[type="button"]:active {
  color: white;
  background: black;
  padding: 0;
}

<body style="background:#10275e">
<input type="button" value="Press me" />
</body>

谁能告诉我如何让 IE11 不移动 :active 和 :hover 上的按钮文本？

这与 flex 样式无关，所以它为什么要被骗？

Answer 1

找到一个 solution on another thread (from this 问题）！

解决方案需要对您的代码进行一些更改（输入需要是按钮元素），因为我们想在按钮内使用跨度。

button {
  width: 200px;
  height: 3rem;
  
  background: #10275e;
  border: 1px solid white;
  color: white;
  
  font-size: 1.2rem;
}
  
button:hover {
  color: #10275e;
  background: white;
}
  
button:active {
  color: white;
  background: black;
  padding: 0;
}

button > span {
  position: relative;
}

<body style="background:#10275e">
<button><span>Press Me</span></button>
<body>

Answer 2

这是Internet Explorer默认添加的按压效果。

无法禁用或删除它。

如果您不想要这种效果，下面是您可以尝试使用 IE 的另一种解决方法。

<!DOCTYPE html>
<html>
<body>

<h2>Test Button Element</h2>
<a href="#" onclick="myfunction()" role="button"><img src="https://www.freepngimg.com/thumb/submit_button/25387-5-submit-button-clipart-thumb.png"/></a>
</body>
</html>

在 IE 11 中的输出：

这里我们用具有按钮作用的锚标签替换按钮，我们在锚标签内使用看起来像按钮的图像。所以当用户在IE中点击它时，他们不会得到那种紧迫的效果。

IE11 在 :hover 和 :active 上将按钮文本移动一些 px

IE11 shifts button text by some px on :hover and :active

css

internet-explorer-11

ie11-developer-tools