去除Internet Explorer按钮的3D按压效果

Question

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

我已经尝试过以下方法：

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

但这会使整个按钮向左上移动1像素（不是我想要的行为）。
我只想让文本保持在相同的位置，即使被点击了。
我已经找到了这个问题，但没有好的答案，所以我在这里提问。
这是我的代码：
http://codepen.io/anon/pen/aliFb

- Fez Vrasta

---

在其他浏览器中，这样可以解决问题：但我刚测试过，在IE上不起作用。那么使用具有display:block的<a href..>怎么样？ - DanielKhan

仅供语义正确性。 - Fez Vrasta

看Bootstrap时，我在IE上看到了相同的效果。我认为你在这里深入了系统领域（例如对于收音机、选择器等）。 - DanielKhan

无法相信没有解决方案 :( - Fez Vrasta

如果你想使用背景图片，这里有一个相当丑陋的解决方案（如果你还没有自己找到的话）：http://www.pmob.co.uk/temp/input-rollover-test.htm 看起来似乎只对值文本应用了效果。 - DanielKhan

哦不，请不要，高dpi和带宽杀手的解决方案 :( 谢谢，不过。 - Fez Vrasta

Answer 1

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

我的解决方案是将按钮文本放在标签中，然后将

- Jed Burke

---

实际上，transform: translate(0, 0)完美地解决了问题！虽然这仍然是一种技巧，但可以无缝地工作。 - tomekwi

IE9现在应该已经过时了。 - Roel

Answer 2

我尝试了这个，它完美地运行了。

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

- user9935755

Answer 3

transform: translate(0, 0); 在IE11中可行。感谢@tomekwi。

我的按钮文本跳动问题出现在::before伪元素内，因此我使用以下代码来解决这个问题：

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

但最终也许最好还是让它在IE中跳转。

- Scymex