css - 如何摆脱内容上的虚线

Question

有时我在单击时会在文本或内容周围看到黑色虚线边框。这主要发生在 Firefox 上。我试图设置 border: none; 来摆脱它，但没有成功。

示例代码如下:

<div class="main">
    <div class="sub">
        <button>Show</button>
    </div>
</div>
<span>
    <button  class="styled-button">
         Click
    </button>
</span>

这是 CSS:

button {
    outline: 0;
    border: 0;
    text-decoration:0;
    -moz-outline-style: 0;
}
.styled-button {
    color: #fff;
    background: green;
    height: 36px;
    width: 145px;
    padding: 2px 25px;
    margin: 10px;
    outline: none;
    border: none;
    text-decoration: none;
   -moz-outline-style: none;
}
span {
    outline: 0;
    border: 0;
    text-decoration:0;
}

有人可以建议我解决这个问题吗？为什么它会出现在第一位？

更新:

我以为我可以在某个时候修复它。但是我的一些内容仍然存在问题，那就是在 Mozilla Firefox 中。我已经用代码更新了问题。请查看fiddle

Answer 1

我过去也遇到过类似的问题，通常可以通过简单的技巧来阻止这种虚线综合症出现在您的内容中。我是这样做的:

   outline: 0;
   border: 0;