如何摆脱内容上的虚线

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; 

Answer 2

考虑 <a href="#">click</a>

现在删除大纲，你需要应用一些css

a{
   outline:0;
  }

任何方式即将使用链接的样式

 a:hover, a:active, a:focus {
     // style it
  }

对于Firefox输入，您可以尝试

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

对于IE9，您可以使用以下

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

您也可以尝试

 a{
    outline: 0;
    outline-style:none;
    outline-width:0;
  }