Firefox中按钮内部的大纲（包括屏幕截图）

Question

我的页面中有以下html结构

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

这样做的原因是，当按下按钮时，通过按钮处于活动状态时跨度的相对位置，我可以使文本稍微降低。

然而，在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;
}