Internet Explorer 按钮：活动内边距

Question

Trident <=9 似乎会为处于激活状态的按钮元素添加类似于内部填充的内容。

是否可以使用CSS禁用这个特性？

- mate64

---

没错，这就是IE中按钮的工作方式。它来自于WindowXP的GUI小部件3D效果学校。如果你不想要这种效果，就不要使用button元素。 - Spudley

“文本移动”是正常的，但在您的屏幕截图中，文本似乎比正常情况下移动得更多。它通常只向下和向右移动约1像素。您的HTML/CSS是什么？包含它的[jsFiddle]（http://jsfiddle.net/）会有所帮助。还有哪些版本的IE？ - thirtydot

这个图片只是一个例子，不是一个截图。无论如何，将内部按钮的文本从6移动到9。在我看来，这是一个无用且糟糕的功能。fu ms. - mate64

我以为这是某种错误，导致文本移动了很多 :D - thirtydot

IE的这个“特性”真是让人很烦。 - user17753

Answer 1

在Microsoft Internet Explorer 11+中，您可以解决这个问题！对于按钮的内部元素，请使用position: relative。

html:

<button><span>Submit</span></button>

CSS：

button > span{position:relative}

享受！

- Максим К.

---

-1 这不适用于 Trident 版本 10.x 之后的版本！ - mate64

+1 经测试，在至少IE11版本上可行。这对于至少某些版本的IE拥有一个解决方案是很好的。 - Qtax

这也可以帮助，稍作变化 https://dev59.com/XnnZa4cB1Zd3GeqPrY7u - Zlatko Vujicic

当我的按钮具有 display: inline-table 时无法正常工作。 - Paya

@mate64 Edge 如何处理更新？ - brandito

Answer 2

更新：适用于IE11+，可以去掉。

---

在旧版本的Internet Explorer中，你无法摆脱这个问题。

正如@Spudley所说：

如果你不想使用元素，就不要使用它。

如果真的很重要，那么元素是唯一替代方案，但为了修复这个问题而仅仅进行切换并不值得。Internet Explorer的用户已经习惯了这种效果。

- thirtydot

---

感谢 thirtydot！希望微软能在常规版本中删除此功能。问候。 - mate64

实际上，最好对影响网站的操作使用按钮。而对于完全不影响的操作，则使用链接。（何时使用按钮或链接） - rappongy

Answer 3

<button><span>Submit</span></button>

---

button:active > span {
 -ms-transform: translate(0px, -0.5px);
}

- wilsonpage

---

至少在IE 11上可以工作，如果使用translate(-0.5px -0.5px)，它完全抵消了按钮在被按下时的“移动”。此外，通过使用-ms-transform属性，它不会对任何其他浏览器产生影响。对我来说，这是最好的解决方案。如果它是一个按钮，就没有必要不使用按钮标签。 - Dylanbob211