1

拿下面的代码片段。

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

在此处输入图像描述

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

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

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 不将按钮文本移到:activeand上:hover？

这与 flex 样式无关，那为什么会是骗子呢？

4

2 回答 2

1

在另一个线程上找到了解决方案（来自这个问题）！

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

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>

于 2019-07-10T12:17:25.790 回答
1

也就是IE默认添加的按压效果。

无法禁用或删除它。

如果您不想要这种效果，下面是您可以尝试使用 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 中点击它时，他们不会得到那种按压效果。

于 2019-07-10T13:45:02.680 回答