0

我的页面中有以下 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 只是不断地在单词周围添加轮廓。

4

1 回答 1

2

轮廓是焦点指示符。

它不是通过按钮本身的 CSS 边框或轮廓来实现的，因为它们具有完全不同的行为。

你可以摆脱它

::-moz-focus-inner { 
  border: 0;
  padding: 0;
}
于 2013-01-22T15:31:45.453 回答