如何获得图像链接周围的:focus轮廓以不将其切断? [英] How can I get the :focus outline around an image link to not cut it off?

问题描述

当有人在浏览网站时，我正在尝试更改焦点轮廓的外观.我正在使用的CSS如下:

I'm trying to change the look of the focus outline for when someone is tabbing through the website. The CSS I'm using is below:

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

图片链接是使用以下html生成的:

The image link is generated using the below html:

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

但是对于具有图像的链接，此样式将贯穿图像而不是图像周围.我无法发布图像，但是这里是imgur链接，指向当我尝试从w3schools在Tryit Editor上调试问题时获取的相关屏幕截图

However for a link that has an image, this style is cutting through the image instead of around it. I can't post images, but here is the imgur link to the related screenshots taken from when I was trying to debug the issue on the Tryit Editor from w3schools

jsFiddle http://jsfiddle.net/k6vsckue/

jsFiddle http://jsfiddle.net/k6vsckue/

推荐答案

a 元素默认显示为 inline .内联元素的 height 属性无法更改，因此图像溢出了容器.然后， a 元素上的轮廓就会切穿"它.

a elements are displayed inline by default. The height property of inline elements cannot be change and so the image is overflowing out of the container. The outline on the a element then appears to 'cut' through it.

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

You can, however, change the display type to inline-block so the a's height will change to fit its image and achieve the effect you want.

CSS

A { display:inline-block; }

实时示例: http://jsfiddle.net/5ho7rf46/

这篇关于如何获得图像链接周围的:focus轮廓以不将其切断?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！