为什么<a>设置为"显示：块"的"标签具有不规则的焦点轮廓形状？

Question

仅在谷歌浏览器中 - 当我将<a>标签设置为显示块时，当它获得焦点时，它具有不规则的轮廓形状。(见截图(。

不规则轮廓截图

这是 Chrome 中的错误还是某些 CSS 会导致此问题？

Answer 1

此问题不仅发生在元素上，所有可聚焦的元素在 Chrome 上都是这样表现的。对于实际的 CSS 大纲和焦点轮廓，元素区域的计算方式不同。不确定原因，但焦点处理许多功能，例如它可以触发键盘、文本到语音转换以实现可访问性等。所以也许需要以不同的方式处理。

块元素的 CSS 框是根据定义的高度、宽度和位置计算的。因此，您的元素将定义轮廓，如果您有可见的溢出，边框和轮廓不一定与元素的实际内容匹配。

对于焦点轮廓，计算中会考虑元素中的文本节点。轮廓区域是元素框和文本节点框的组合。它或多或少是元素框加上选择范围的矩形。

在您的示例中，我猜您定义的高度小于元素中文本的高度，因此焦点轮廓具有此形状。它采用元素内文本节点的区域 + 元素的框。

处理此问题的最佳方法是将高度设置为自动，或者至少使其包含文本。

查看焦点大纲如何与带有一些溢出的块元素的 CSS 大纲不匹配的示例：

let a = document.getElementById('a');
a.focus()

div {
display: block;
width: 190px;
height: auto;
font-size: 23px;
border: solid 1px green;
margin-top: 50px;
line-height: 60px;
box-sizing: content-box;
overflow-y: visible;
float: left;
}
#a {
height: auto;
}
#b {
height: 40px;
}
#c {
height: 0px;
}
span {
display: block;
}

<div id=a tabindex="1">
Click  
<span>to</span>
focus
</div>
<div id=b tabindex="2">
Click  
<span>to</span>
focus
</div>
<div id=c tabindex="3">
Click  
<span>to</span>
focus
</div>

Answer 2

问题的本质是元素具有固定高度的display: block，并且字体大小也高于该块。文本实际上高于块模型，因此它重叠。下面通过给背景一个颜色来说明。

document.getElementById('nc').focus();

#nc {
display: block;
background: rgb(200,200,200);
font-size: 20px;
height: 15px;
}

<a id='nc' href='#'>Normal content</a>

chrome 浏览器通过将两者的轮廓"合并"在一起来解决这个问题。因此结果。

那怎么办。这取决于情况。我可以快速想到 2 个解决方案，使用哪种解决方案取决于您的上下文：

#1更改块的高度和填充，使文本适合

document.getElementById('nc_2').focus();

#nc_2 {
display: block;
background: rgb(200,200,200);
font-size: 20px;
padding: 10px;
height: 1em;
}

<a id='nc_2' href='#'>Normal content</a>

#2 改用display: inline-block

document.getElementById('nc_3').focus();

#nc_3 {
display: inline-block;
background: rgb(200,200,200);
font-size: 20px;
}

<a id='nc_3' href='#'>Normal content</a>

Answer 3

通过设置带有显示的<a>来解决此问题：内联块而不是内联，然后使用边距进行调整。

当焦点设置在以下<a>时发生：

<a>
<img src="...">
<h1 class="sr-only">Go home!</h1>
</a>

Answer 4

它不是错误，它是在Chrome中内置的，一些浏览器也这样做。 也许这可以解决您的答案：

a:focus,a:active{
border : 0px!important;
outline : 0px!important;
}

Answer 5

默认情况下，锚标记中大纲属性位于焦点上，因此我们可以将其删除 大纲：无; 基本上 focus.so 它不是浏览器问题。 您可以尝试下面的 CSS 来解决。

a{
display:block;
}
a:focus, a:active{
outline:none !important;
}

<a href="#">Remove outline from anchor</a>