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

Question

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

我尝试过：

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

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

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

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

Answer 1

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

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

祝你好运

Answer 2

我试试这个，效果很好。

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

Answer 3

RenderTransform适用于IE11。谢谢@tomekwi。

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

transform: translate(0, 0);

但是最后，最好还是让它跳入IE。