为什么轮廓大于 div？
Why is the outline larger than its div?
更新
为了使输入恢复到我想要的大小，我必须去掉填充和边框。以下实现了这一点：
*{padding:0; margin:0; border:0;}
感谢 CBroe，我发现这是 FF 的独特之处，它为 input 添加了 .75px 的默认边框和 1.5px 的填充。总共约4.5px。 Chrome 没有。
更新 2
上面的修复只是让子元素恢复到我认为应该的大小。下面接受的答案表明 FF 有一个错误，它解释了为什么大纲没有按其应有的方式运行，即仅概述父级而不是为绝对定位的后代扩展。
我有两个垂直堆叠的 div 元素，它们的 outline 属性 设置为 1px。 div 元素的 height 为 117px。
我希望两个 div 元素相交的地方的轮廓是连续的。它这样做没有任何内容。
当我将 top = 97px 和 height = 20px 的 absolute 定位输入放入顶部 div 时，div 的轮廓被向下推。
a fiddle 显示了这一点。如果您删除 input，您将看到顶部 div 轮廓如何位于底部 div.
旁边
有两件事（至少）我不明白：
1) 在使用浏览器的开发工具 (Firefox) 检查框时，我看到顶部 div 实际上仍然是 117px 高。轮廓应围绕 div 绘制，但似乎并非如此。为什么？
2) 输入的顶部为 97px，高度为 20px。为什么这会影响轮廓的位置？看起来轮廓被向下推了 4px。
我有 2 个答案给你：
1) In examining the box using the browser's dev tools (Firefox), I see that the top div is in fact still 117px high. The outline should be drawn around the div, but appears not to be. Why?
轮廓似乎围绕着里面的所有东西绘制。所以如果一个元素在底部突出 100px。轮廓也将移动 100px。在这种情况下，输入元素突出 8px。所以轮廓比你预期的要长 8px。
The input has a top of 97px plus a height of 20px. Why would this affect the position of the outline? It looks like the outline is pushed down 4px.
你说的差不多了，97px+20px确实是117px的高度。但是你忘了从输入元素开始计算 8px。这来自 3px 厚边框 + 1px 厚填充。
那是因为 outlines 依赖于实现。不仅是尺码：
Outlines may be non-rectangular.
来自 CSS3 UI、
This specification does not define the exact position or shape of the
outline, but it is typically drawn immediately outside the border box.
Firefox 历来倾向于在各种情况下使轮廓变大，例如
- outlines are drawn outside (i.e., expanded by) box-shadow and other visual overflow
- outlines are drawn outside (expanded by) outlines on descendant elements
前者已修复，后者似乎与您的问题相同。
更新
为了使输入恢复到我想要的大小，我必须去掉填充和边框。以下实现了这一点：
*{padding:0; margin:0; border:0;}
感谢 CBroe，我发现这是 FF 的独特之处，它为 input 添加了 .75px 的默认边框和 1.5px 的填充。总共约4.5px。 Chrome 没有。
更新 2
上面的修复只是让子元素恢复到我认为应该的大小。下面接受的答案表明 FF 有一个错误，它解释了为什么大纲没有按其应有的方式运行，即仅概述父级而不是为绝对定位的后代扩展。
我有两个垂直堆叠的 div 元素，它们的 outline 属性 设置为 1px。 div 元素的 height 为 117px。
我希望两个 div 元素相交的地方的轮廓是连续的。它这样做没有任何内容。
当我将 top = 97px 和 height = 20px 的 absolute 定位输入放入顶部 div 时，div 的轮廓被向下推。
a fiddle 显示了这一点。如果您删除 input，您将看到顶部 div 轮廓如何位于底部 div.
有两件事（至少）我不明白：
1) 在使用浏览器的开发工具 (Firefox) 检查框时，我看到顶部 div 实际上仍然是 117px 高。轮廓应围绕 div 绘制，但似乎并非如此。为什么？
2) 输入的顶部为 97px，高度为 20px。为什么这会影响轮廓的位置？看起来轮廓被向下推了 4px。
我有 2 个答案给你：
1) In examining the box using the browser's dev tools (Firefox), I see that the top div is in fact still 117px high. The outline should be drawn around the div, but appears not to be. Why?
轮廓似乎围绕着里面的所有东西绘制。所以如果一个元素在底部突出 100px。轮廓也将移动 100px。在这种情况下，输入元素突出 8px。所以轮廓比你预期的要长 8px。
The input has a top of 97px plus a height of 20px. Why would this affect the position of the outline? It looks like the outline is pushed down 4px.
你说的差不多了，97px+20px确实是117px的高度。但是你忘了从输入元素开始计算 8px。这来自 3px 厚边框 + 1px 厚填充。
那是因为 outlines 依赖于实现。不仅是尺码：
Outlines may be non-rectangular.
来自 CSS3 UI、
This specification does not define the exact position or shape of the outline, but it is typically drawn immediately outside the border box.
Firefox 历来倾向于在各种情况下使轮廓变大，例如
- outlines are drawn outside (i.e., expanded by) box-shadow and other visual overflow
- outlines are drawn outside (expanded by) outlines on descendant elements
前者已修复，后者似乎与您的问题相同。