为什么 `<a>` 标签设置为 `display:block` 有不规则的焦点轮廓形状？ [复制]

Question

仅在 Google Chrome 中 - 当我将 <a> 标记设置为显示块时，当它获得焦点时，它具有不规则的轮廓形状。 （见截图）。

Irregular outline screenshot

这是 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> 设置为 display: inline-block 而不是 inline 解决了这个问题，然后使用边距进行调整。

当焦点设置在下面的<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>