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

【问题标题】：How can I prevent Internet Explorer from adding padding to buttons when pressed?如何防止 Internet Explorer 在按下时向按钮添加填充？
【发布时间】：2012-08-23 21:50:08
【问题描述】：

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

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

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

谁能帮我去掉这个多余的填充和虚线边框？

提前致谢

Qoguth

【问题讨论】：

对于虚线边框，试试outline: 0;
请不要删除虚线边框。它可以显示焦点的位置，以便无法使用鼠标的用户可以使用键盘或其他无障碍输入设备浏览您的网页。

标签： html css internet-explorer padding

【解决方案1】：

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

button { outline: none; }

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

【讨论】：

我认为，很遗憾，这是真的。

【解决方案2】：

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

button:active { outline: none; }

如前所述，左上角内边距的增加是不可覆盖的。

【讨论】：

【解决方案3】：

你可以试试：

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

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

【讨论】：