具有垂直位置效果的Bootstrap按钮

Question

我想在我的bootstrap按钮上添加一个位置效果：active state。不幸的是，IE无法正确渲染效果。请使用此网站并比较Chrome / Firefox和IE 10/11之间的效果：

  http://jsfiddle.net/stebir/f0nw6kp2/2/

如果我点击按钮，我希望平滑的顶部过渡（就像Chrome和Firefox中的魅力一样）。但IE将标签“Button”略微向右移动。这是一个非常微妙的效果，但它很烦人......

你有任何想法在IE中阻止这种情况吗？ 此致，史蒂文

  [1]: http://jsfiddle.net/stebir/f0nw6kp2/2/

Answer 1

这是IE中的默认功能......但有几种方法可以解决它。

1. 使用锚点而不是按钮。

<a id="myBtn" class="btn btn-warning">Button</a>

1. 使用span与posistion: relative一起保留文字。

<button type="button" id="myBtn" class="btn btn-warning"><span>Submit</span></button>

button > span { position:relative }

http://jsfiddle.net/pv01x0ud/