html - 在 anchor 标签上按下任何键盘键时，轮廓偏移的变化是预期的行为吗？

Question

在下面的演示中，在 anchor 标记上单击并按住 mousedown，然后将光标拖离，同时按住 mousedown，最后松开单击。您将在 anchor 标记周围看到红色虚线轮廓。现在，如果您按下 shift 键，轮廓将偏移几个像素。

a:focus {
  outline: 1px dotted red;
}

<a href="#">Click+hold, then release, then press shift key</a>

按 ctrl 时不会发生该行为或 fn键等，但确实发生在大多数键上。这种行为似乎是跨浏览器兼容的，这让我思考:

这是brosers实现html的错误吗？

或者，这是 w3.org 针对某些用户体验问题建议的预期行为吗？

Answer 1

单击一个元素，然后按 Shift ，如您所说，或在 some other situations determined via heuristics ，您同时触发了 :focus和 :focus-visible状态。然后浏览器将为这些状态应用其默认样式。
您报告的结果可以在 Chrome 中重现，因为它的 default user agent stylesheet ，但不是在 Firefox 中，例如。您可以通过打开 DevTools 并强制 a 的状态来自行测试。元素。
以下示例重现了 Blink(Chrome 的渲染引擎)默认样式，以便在其他浏览器中可见:

a:focus {
  outline: 1px dotted red;
}

a:any-link:focus-visible {
  outline-offset: 1px;
}

/* for non-Blink WebKit browsers */
a:-webkit-any-link:focus-visible {
  outline-offset: 1px;
}

<a href="#">Example link</a>

<!-- To see the result described in the question for sure, 
     please force :focus and :focus-visible states using DevTools -->