如何获得：图像链接周围的焦点轮廓以不切断它？

Question

我正在尝试更改焦点大纲的外观，以便有人在浏览网站时。我正在使用的CSS如下：

:focus { outline: solid 6px orange; outline-offset: 3px }

使用以下html：

生成图像链接

<A href="http://www.google.com"><IMG src="http://us.usablenet.net/mt/a/hyatt.com/l1398691219000/icons/info.png"></A>

但是对于包含图像的链接，此样式会切换图像而不是图像。 我无法发布图片，但这里是我尝试从w3schools在Tryit编辑器上调试问题时拍摄的相关屏幕截图的imgur链接

jsFiddle http://jsfiddle.net/k6vsckue/

Answer 1

默认情况下，

a元素会显示inline。内联元素的height属性不能更改，因此图像溢出容器。然后a元素上的大纲显示为＆＃39; cut＆＃39;通过它。

但是，您可以将显示类型更改为inline-block，这样a的高度就会改变以适合其图像并达到您想要的效果。

CSS

A { display:inline-block; }

实例：http://jsfiddle.net/5ho7rf46/