在MacOS上的Firefox中的互动元素适当的标签

最近，我在MacOS上遇到了Firefox中令人沮丧的重点问题。用户报告了通过嵌入Codepen嵌入的标签时意外的滚动行为 - 页面将跳到顶部！在调查这一点时，我发现了一些奇怪的标签不一致之处。

我的最初测试揭示了焦点行为不稳定：有些元素是可列出的，而另一些则不是。令人难以置信的是，链接（标签）有时通过标签键无法访问。这似乎从根本上是错误的。

经过一些研究和社区查询，罪魁祸首出现了：MacOS系统偏好影响Firefox的标签顺序。启用此偏好（并重新启动Firefox）解决了问题，从而使诸如links tabbbable之类的预期要素。

原始的滚动到顶部的错误源于Codepen嵌入中的“跳过结果iframe”链接。该链接旨在绕过iframe，只有在聚焦时才会出现。我的最初（当然是笨拙）尝试使用position: absolute; top: -9999px; left: -9999px导致Firefox将页面跳到顶部，即使焦点样式重新定位了元素。这似乎是Firefox中的种族条件。

我用更强大，更易于访问的隐藏技术替换了这种方法。我还发现，当有问题的链接驻留在iframe中时，Firefox会影响父页面的滚动位置。更新的解决方案也解决了这一点。

以上是在MacOS上的Firefox中的互动元素适当的标签的详细内容。更多信息请关注PHP中文网其他相关文章！