删除图像链接上的奇怪的点击框

Question

我正在使用bootstrap制作一些包含图像的按钮。

但是当我点击它们时，会出现一条奇怪的水平线，以及FF上的虚线边框。

我试过outline: none;，但它没有改变任何东西...... 我怎样才能重新安排html（或编辑css）来解决这个问题？我不想要那些盒子（特别是中间的水平盒子）

感谢

HTML

<div class="button frontbutton col-md-4">
     <a href="/tips">
         <img src="url.png" class="buttonPic">
         <span data-i18n="buttons.tips">Tips</span>
     </a>
</div>

CSS

.frontbutton {
  padding: 15px;
}

.button {
  display: inline-block;
  color: #444;
  border: 1px solid #CCC;
  background: rgba(210, 210, 210, 0.62);
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
  margin: 0px;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
}

a {
  color: #199ACE;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

img.buttonPic {
  width: 95%;
}

感谢

https://jsfiddle.net/pLkyqz0x/

更新

在制作小提琴时，我注意到是什么原因造成了灰色条纹（a:active上的方框阴影） 但是FF上的红色框仍然是....

Answer 1

这是a:focus { }风格。因此，您可以通过设置a:focus { outline: none; }来删除它，但这不是最佳做法，因为焦点样式是可访问性要求。您应该重新定义适合您的焦点样式。 （有关为什么这是不良做法的进一步阅读：http://www.outlinenone.com/）