Html 从链接环绕div中删除焦点轮廓（镀铬）

我将一个div包装在一个link标签中，当您在Chrome中对其进行标签时，它看起来如下所示：

我知道这是一个小小的不满，但有没有办法摆脱顶部的“露头”，我认为这是Chrome勾勒HTML链接部分的方式。但是我想在图像部分保留默认的铬蓝色轮廓

下面是一个简化的测试用例：

HTML:

JSFiddle：

添加以下内容也会从图像（以及所有子元素）中删除默认的Chrome轮廓，这是我不希望看到的：

a:focus
{ outline: none; }

“突出”是由

.card

元素的边距造成的，该边距在链接和图像元素之间创建了空间。边距通常会以这种方式导致奇怪的布局问题

一个简单的修复方法是从

.card

中删除margin属性，以便焦点轮廓与图像齐平：

.card {
    display: inline-block;
    border-radius: 5px;
    width: 250px;
    margin: 5px;
    vertical-align: top;
    text-align: left;
}

---

你可以做一些简单的CSS，不给父母的

a

标签添加任何轮廓，而是在图像周围添加轮廓

.card{
显示：内联块；
边界半径：5px；
宽度：250px；
保证金：5px；
垂直对齐：顶部；
文本对齐：左对齐；
}
.诺林克：聚焦{
大纲：0无！重要；
}
.nolink:focus.card img{
边框：2件纯蓝；
盒影：1px 1px 0#888；
}
.卡img
{
宽度：250px；
高度：250px；
}

@dippas示例代码不起作用。。。正如我在问题中所说，我不想从img部分删除默认大纲

a:focus{outline:none}

删除所有子元素的轮廓将

display:inline block

添加到链接本身将起作用，这可能是您的用例可以接受的解决方案，也可能不是。（）另一个选项是将大纲移动到div而不是链接，但这需要了解chrome的默认大纲样式，这些样式可能会更改/不匹配其他浏览器，因此在我看来，这是一个更糟糕的选项：谢谢，这是最接近答案的选项。在又一天试图找到真实答案之后，似乎不可能在图像部分周围保留默认的Chrome焦点轮廓，同时将其从链接中删除。但就我而言，这是一个可以接受的解决方案。幸运的是，我没有任何边界样式会受到影响，而且

框大小：border box

可以防止焦点不必要地推送/回流元素。

a:focus
{ outline: none; }

.card {
    display: inline-block;
    border-radius: 5px;
    width: 250px;
    margin: 5px;
    vertical-align: top;
    text-align: left;
}