如何防止 Internet Explorer 在按下时向按钮添加填充？

Question

我使用 CSS 设计了我的提交按钮。 在任何 Webkit 或 Gecko 浏览器中，它都能完美运行，但 Internet Explorer 9 在按下按钮时会为按钮的文本添加填充。 此外，您还可以看到这个愚蠢的虚线边框。 它看起来像这样：

http://img6.imagebanana.com/img/tkp7l8m3/button.png

我在 CSS 中为 input:active 指定的特殊背景图像仅在 IE 中显示，如果在按钮边框和此虚线边框之间的非常薄的区域中单击按钮。 如果在中间单击按钮，它会保持悬停背景，尽管它被按下。

谁能帮我删除这个额外的填充和虚线边框？

提前致谢

古古斯

Answer 1

要摆脱虚线边框，您可以使用纯 CSS：

button { outline: none; }

至于单击时的填充，我担心它是无法更改的内部浏览器行为的一部分。

Answer 2

你可以试试：

/* Swap 1px 6px for your desired top+bottom and left+right padding. */
button { padding: 1px 6px; }
button:active { outline: none; padding: 1px 6px; }

假设您实际上想要填充而不是其他属性。

Answer 3

到目前为止给出的两个答案在一个重要方面都是不正确的。 您应该只将键盘焦点轮廓隐藏在：活动上，将其隐藏在：焦点上也会损害键盘导航。

button:active { outline: none; }

如前所述，左上角填充的增加是不可替代的。