为什么在 Firefox 中通过字段切换会奇怪地失败？

Question

我看到 Firefox 处理字段选项卡的奇怪行为，我无法理解为什么。我已将页面上的代码简化为对问题的非常简单的再现。

在从以下代码呈现的页面中单击input 上方和label 右侧之前，Tabbing 工作正常：

body {
  padding-top: 20px;
}

label {
  position: absolute;
  top: 5px;
}

<label>Click on the right side of this line and tabbing stops working |</label>
<input>

在输入下方或级别单击会导致选项卡再次按预期运行。这是预期的行为，我只是不了解标签，还是 Firefox 浏览器中的某种错误？

Firefox 版本是 80.0.1（64 位），我使用的是台式计算机。

Chrome 没有问题。

Answer 1

您可以将width: 100% 应用到label，然后它可以工作，因为它跨越了整行。

body {
  padding-top: 20px;
}

label {
  position: absolute;
  top: 5px;
  width: 100%;
}

<label>Click on the right side of this line and tabbing works |</label>
<input>