我有一个包含在链接标记中的 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; }
最佳答案
您可以执行一些简单的 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>关于html - 从链接包装 div 中删除焦点轮廓(在 Chrome 中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52460579/