更新
为了使输入恢复到我想要的大小，我不得不摆脱填充和边框。以下完成了这个：
*{padding:0; margin:0; border:0;}
感谢CBroe，我发现这是FF独有的，它为input添加了0.75px的默认边框和1.5px的填充。总共大约4.5px。 Chrome没有。
更新2
上述修复只会将子元素恢复到我认为应该的大小。下面接受的答案显示，FF有一个错误，可以解释为什么大纲没有表现出应有的行为，这只是为了概述父母而不是为绝对定位的后代进行扩展。
我有两个div元素垂直堆叠，其outline属性设置为1px。 div元素的height为117像素。
我希望两个div元素相遇的位置使其轮廓连续。它没有任何内容。
当我将absolute位置输入（顶部= 97px和高度= 20px）放入顶部div时，该div的轮廓将被按下。
这是a fiddle，显示了这一点。如果您移除input，则会看到顶部div大纲位于底部div旁边。
我不明白有两件事（至少）：
1）在使用浏览器的开发工具（Firefox）查看该框时，我发现顶部div实际上仍然是117px高。轮廓应该围绕div绘制，但似乎不是。为什么呢？
2）输入的顶部为97px，高度为20px。为什么这会影响轮廓的位置？看起来轮廓被推下4px。
答案 0 :(得分：4)
那是因为outlines依赖于实现。它的大小不仅仅是：
轮廓可以是非矩形的。
来自CSS3 UI，
本规范未定义的确切位置或形状 轮廓，但通常在边框外面立即绘制。
Firefox在历史上一直倾向于在各种情况下使轮廓更大，例如
前者是固定的，后者似乎和你的问题一样。
答案 1 :(得分：0)
我给你2个答案：
1）在使用浏览器的开发工具（Firefox）检查框中，我看到顶部div实际上仍然是117px高。轮廓应该围绕div绘制，但似乎不是。为什么呢？
轮廓似乎围绕着内部的一切。因此，如果一个元素在底部突出100px。轮廓也将移动100px。在这种情况下，输入元素突出8px。因此大纲比你预期的长8倍。
输入的顶部为97px，高度为20px。为什么这会影响轮廓的位置？看起来轮廓被推下4px。
你几乎就在那里，97px + 20px确实是117px的高度。但是你忘了从输入元素算起8px。这来自3px厚边框+ 1px厚填充。