2011-05-01 48 views
0

我用CSS設計了我的提交按鈕。在任何Webkit或Gecko瀏覽器中,它都能正常工作,但Internet Explorer 9在按下按鈕的文本時會添加填充。另外,你可以看到這個愚蠢的虛線邊框。它看起來像這樣,那麼:如何防止Internet Explorer在按下時向按鈕添加填充?

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

我在CSS指定輸入的特殊背景圖像:激活,則僅在IE中顯示,如果按鈕被點擊按鈕的邊框之間的非常薄的區域這個虛線的邊框。如果按鈕在中間被點擊,它會保持懸停背景,儘管它被按下。

任何人都可以幫我刪除這個額外的填充和虛線邊框?

在此先感謝

Qoguth

+1

對於虛線邊框,請嘗試使用'outline:0;' – 2011-05-01 10:55:45

+1

請不要刪除虛線邊框。它可以顯示焦點所在,以便無法使用鼠標的用戶可以使用鍵盤或其他輔助功能輸入設備瀏覽您的網頁。 – Alohci 2011-05-01 12:23:35

回答

1

爲了擺脫虛線邊框的你可以用純CSS:

button { outline: none; } 

至於點擊後填充,我擔心它的內部瀏覽器的一部分無法改變的行爲。

+0

不幸的是,我認爲這是事實。 – 2011-07-15 15:31:32

0

你可以嘗試:

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

假設你真正想要的填充,而不是一些其他財產。

0

到目前爲止給出的兩個答案在一個重要的方面是不正確的。您應該只將鍵盤焦點輪廓隱藏在:active,隱藏它:焦點太傷害鍵盤導航。

button:active { outline: none; } 

如前所述,左上角填充的增加是不可覆蓋的。

相關問題