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

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/

更新

在制作 fiddle 时，我注意到是什么导致了灰色条(a:active 上的框阴影) 但 FF 上的红框仍然存在......

Answer 1

这是 a:focus { } 风格。所以你可以通过设置 a:focus { outline: none; 来删除它} 但是，这不被认为是最佳实践，因为焦点样式是一种可访问性要求。相反，您应该重新定义适合您的焦点样式。 (进一步阅读为什么这是不好的做法:http://www.outlinenone.com/)