Internet Explorer 按钮：活动内填充答案

【问题标题】：Internet Explorer button:active inner-paddingInternet Explorer 按钮：活动内填充
【发布时间】：2011-10-08 08:01:18
【问题描述】：

Trident <=9 似乎在 active button 元素上附加了类似 inner-padding 的东西。

是否可以通过使用 css 禁用此功能？

【问题讨论】：

是的。这就是按钮在 IE 中的工作方式。它来自 WindowXP 学校的 GUI 小部件 3D 效果。如果您不想要这种效果，请不要使用 button 元素。
所以这是三叉戟的“特色”？
“文本的移动”是正常的，但在您的屏幕截图中，文本的移动似乎超出了正常范围。它通常只向下和向右移动大约 1px。你的 HTML/CSS 是什么？包含它的jsFiddle 会有所帮助。还有哪个版本的 IE？
图片只是一个例子，不是截图。无论如何，即将内部按钮文本从 6 移动到 9。在我看来，这是一个无用且糟糕的功能。福女士。
我认为文本移动了这么多是某种错误：D

【解决方案1】：

更新：对于 IE11+，it can be removed。

不，您无法摆脱它（在旧版本的 Internet Explorer 中）。

正如@Spudley 所说：

如果您不想要这种效果，请不要使用 button 元素。

如果真的很重要，那么a 元素是唯一的选择，但不值得切换只是来解决这个问题。 Internet Explorer 的用户已经习惯了。

【讨论】：

【解决方案2】：

在Microsoft Internet Explorer 11+ 中你可以修复它！ 使用 position: relative 作为按钮的内部元素。

html:

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

css:

button > span{position:relative}

享受吧！

【讨论】：

【解决方案3】：

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

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

【讨论】：

至少在 IE 11 上有效，如果执行translate(-0.5px -0.5px)，它会完全抵消按钮按下时的“移动”。此外，通过使用-ms-transform 属性，它对任何其他浏览器都没有影响。对我来说，这是最好的解决方案。如果是按钮，则无需使用按钮标签