如何防止 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; }

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