Question

我在链接标记中包裹了一个div，当您在Chrome浏览器中选择它时，它看起来像这样：

我知道这是个小问题，但是有什么方法可以消除顶部的“露头”，我认为这是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; }

Answer 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>

Answer 2

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

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

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

从链接环绕div中删除焦点轮廓（在Chrome中）

2 个答案: