从链接包装 div 中删除焦点轮廓（在 Chrome 中）答案

【问题标题】：remove focus outline from link wrapping div (in Chrome)从链接包装 div 中删除焦点轮廓（在 Chrome 中）
【发布时间】：2018-09-22 20:22:25
【问题描述】：

我有一个包含在链接标签中的 div，当你在 Chrome 中使用 tab 键时，它看起来像这样：

我知道这是一个小小的不满，但有什么办法可以摆脱顶部的“露头”，我认为这是 Chrome 概述了 HTML 的链接部分。但我想在图像部分周围保留默认的 Chrome 蓝色轮廓。

这是一个简化的测试用例：

HTML：

<html>
<body>
<a href='tree.com'>
<div class='card'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_- _geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/>
</div>
</a>
</body>
</html>

CSS：

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

JSFiddle：

http://jsfiddle.net/mLfkvuyw/26/

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

a:focus
{ outline: none; }

【问题讨论】：

@dippas 示例代码不起作用......正如我在问题中所说，我不想从 img 部分删除默认轮廓。 a:focus{outline:none} 删除所有子元素的轮廓
将display: inline-block 添加到链接本身将起作用，这对于您的用例可能是也可能不是可接受的解决方案。 (jsfiddle.net/mLfkvuyw/34)
另一种选择是将大纲移动到 div 而不是链接，但这需要了解 chrome 的默认大纲样式，这可能会更改/不匹配其他浏览器，因此 IMO 这是一个更糟糕的选择：jsfiddle.net/mLfkvuyw/51

标签： html css google-chrome

【解决方案1】：

您可以做一些简单的 CSS，不对父级 a 标签应用轮廓，而是将其添加到图像周围。

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

.nolink:focus {
  outline: 0 none !important;
}

.nolink:focus .card img {
  border: 2px solid blue;
  box-shadow: 1px 1px 1px 0 #888;
}

.card img
{
	width: 250px;
	height: 250px;
}

<html>
<body>
<a class='nolink' href='tree.com'><div class='card' ><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/></div></a>
</body>
</html>

【讨论】：

谢谢，这是最接近答案的事情。在尝试找到真正答案的另一天之后，似乎不可能在图像部分周围留下 默认 Chrome 焦点轮廓，同时将其从链接中删除。但就我的目的而言，这是一个可以接受的解决方法。幸运的是，我没有任何会干扰的边框样式，box-sizing: border-box 可以防止焦点不受欢迎地推动/重排元素。

【解决方案2】：

“露头”是由.card 元素的边距在链接和图像元素之间创建空间引起的。边距通常会以这种方式导致奇怪的布局问题。

一个简单的解决方法是从.card 中删除边距属性，以便焦点轮廓与图像齐平：

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

【讨论】：