图片 link 在 Chrome 中关闭

Question

我很难研究这个问题，因为我不知道图像 link 周围的方框到底叫什么。

我在 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 中它工作正常。当您单击其中一个 link 时，图像周围会出现一种行军蚂蚁类型的框，只有蚂蚁没有行军。

但在 Chrome 中，那个 link 框的东西出现在图像下方 link:

我在mac，第一个屏幕截图是我的，第二个是客户在PC 上的。这似乎是某种浮动问题？但这是一个非常基本的 WordPress 主题，还没有那么多定制。我认为 links 在 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.*/
}

图片 link 在 Chrome 中关闭

Image link box off in Chrome

html

css

wordpress

image

hyperlink