大綱在Firefox圍繞內部按鈕跨度（包括截圖）

Question

我有我的頁面

<button class="badbutton"><span>Text</span></button> 

這樣做的原因是，這樣我可以使文字去低一點時，按鈕下面的HTML結構當按鈕被激活時，通過跨度的相對定位來按下。

但是，在Firefox中，我遇到了一個我無法解決的問題。按下按鈕時，其內部的跨度會變成虛線輪廓，即使按鈕不再被按下後，該輪廓仍然存在。我附上了描述我所描述內容的圖像的鏈接。

http://i.imgur.com/6ReslLc.png

我已經嘗試了所有我能在CSS想到的，都無濟於事。

a, a:active img, 
span, 
span:active, 
span:focus, 
button, 
button:active span, 
button:focus span, 
button:focus, 
button:active { 
    border: none; 
    outline: none !important; 
} 

任何幫助將不勝感激。

編輯：在朋友的建議之後，我完全放棄了這些跨度，並選擇在按下時增加按鈕的頂部填充。唉，Firefox只是不斷在單詞上添加一個大綱。

Answer 1

大綱是一個焦點指標。

它沒有用CSS邊框或按鈕本身的輪廓實現，因爲它們的行爲完全不同。

你可以擺脫它與

::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}