删除 3D 按下效果 Internet Explorer 按钮答案

【问题标题】：Remove 3D press effect Internet Explorer button删除 3D 按下效果 Internet Explorer 按钮
【发布时间】：2013-11-25 21:01:52
【问题描述】：

我正在尝试移除 Internet Explorer 中按钮上的 3D 点击效果（我使用的是 IE10）。

我试过了：

button:active {
  position: relative; 
  left: -1px; 
  top: -1px; 
}

但这会使整个按钮在左上角移动 1 px（不是我正在寻找的行为）。
我只想让文本即使在点击时也保持在相同的位置。

我发现 this question 没有好的答案，所以我在这里问。

到目前为止，这是我的代码：
http://codepen.io/anon/pen/aliFb

【问题讨论】：

在其他浏览器中，这可以解决问题：但我刚刚测试过，这不起作用IE。但是如何使用带有显示块的呢？
只是为了语义正确
查看 bootstrap 我在 IE 上看到了相同的效果。我认为您在这里深入系统领域（例如收音机，选择，...）
不敢相信没有解决方案:(
如果你想使用背景图片，这里有一个非常丑陋的解决方案（如果你自己还没有找到的话）pmob.co.uk/temp/input-rollover-test.htm 好像效果只适用于值文本。跨度>

标签： css internet-explorer

【解决方案1】：

现在遇到同样的问题...有点晚了，所以我不知道答案是否仍然适用。

我的解决方案是将按钮的文本放在span 元素中，然后将style 设置为transform: translateY(1px);。并且没有更多不必要的新闻效果。在尝试之前我有点担心，因为它会与 FF、Chrome 和 Safari for Windows 混淆。但奇怪的是，他们似乎忽略了它（至少现在是这样）。分别在 28、27 和 5.1 上测试。另外，我使用的是 IE 10。

祝你好运

【讨论】：

实际上，transform: translate(0, 0) 完美地做到了！仍然是一个 hack，但可以正常工作。
IE9 现在应该已经死了。

【解决方案2】：

我试试这个，效果很好。

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

【讨论】：

【解决方案3】：

transform: translate(0, 0); 适用于 IE11。谢谢@tomekwi。

我正在跳转的按钮文本位于 ::before 伪元素内，因此我使用以下方法解决了该问题：

.myButton:active::before {
    transform: translate(0, 0);
}

但最终还是让它在 IE 中跳转会更好。

【讨论】：