Chrome中的图像链接框关闭[重复]

Question

我很难研究这个问题，因为我不知道图片链接周围的框叫什么。

我在 WordPress 网站上的文本小部件中有这个简单的基本代码：

<a href="https://www.facebook.com/ShiversShavedIce"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/facebook.png" title="Shivers Shaved Ice on Facebook" /></a>
<a href="http://twitter.com/shiverstexas"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/twitter.png" title="Shivers Shaved Ice on Twitter" /></a>
<a href="http://instagram.com/shiverstexas"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/instagram.png" title="Shivers Shaved Ice on Instagram" /></a>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=sn7abbnab&p=oi&m=1113504903602&sit=8kb6nh8hb&f=37e341e0-2a18-443e-9467-cedf64a6e113"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/newsletter.png" title="Keep Up With Us!" /></a>
<a href="mailto:shiverstexas@gmail.com"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/email.png" title="Email Shivers" /></a>

在 Firefox 中它可以正常工作。当您单击其中一个链接时，图像周围会出现一种行军蚂蚁类型框，只有蚂蚁没有行军。

但在 Chrome 中，链接框会显示在图片链接下方：

我在 Mac 上，第一个屏幕截图是我的，第二个是客户端在 PC 上。这似乎是某种浮动问题？但这是一个非常基本的 WordPress 主题，尚未进行太多定制。我认为链接在 Chrome 的情况下仍然可以正常工作，但是下面显示的框看起来不太好，而且有点分散注意力。

谢谢，我知道这可能是超级基本的，我只是有点迷茫。

Answer 1

单像素宽的灰色轮廓是浏览器中默认的:focus 样式。您可以在a 标签上使用display: inline-block; 修复大纲的布局。这将使它们的布局展开以包裹img 元素。

虽然不是最精确的 CSS 选择器，但您可以这样做。

.widget-area .textwidget a {
    display: inline-block;
}

此外，您可以像这样使用 CSS 自定义大纲样式。

.widget-area .textwidget a:focus {
    outline: 0 none;
    /*Some other styles here.*/
}