元素聚焦时#container出现异常位移的问题咨询

大家好，我碰到了一个有点费解的布局问题，想跟大伙聊聊：当点击页面上的focus按钮，让#focusable元素获得焦点时，页面里的#container容器会莫名向上偏移1像素。

先给大家看看能复现问题的完整代码：

<html>
<body>
  <div style="overflow: hidden" id="root">
    <div style="margin: -1px" id="container">
      <div id="spacer" style="height: 2px"></div>
      <div id="focusable" tabindex="0">foo</div>
    </div>
  </div>
  <button onclick="document.getElementById('focusable').focus()">focus</button>
</body>
</html>

我自己测试后有几个发现：

• 在Chrome和Edge浏览器里，#spacer的高度至少要比#container的负边距大1像素才行，不然这个位移问题会出现
• 在Firefox里，#spacer的高度好像不影响这个问题，但如果是把代码存成HTML文件直接打开（不是用代码片段运行），每次测试之间必须强制刷新页面（按Ctrl+F5），不然#container会一直停留在偏移后的位置，不会复位

内容来源于stack exchange