为什么轮廓比其div大？

Question

更新

为了使输入恢复到我想要的大小，我必须摆脱填充和边框。 以下完成此操作：

*{padding:0; margin:0; border:0;}

多亏了CBroe，我发现这是FF特有的，它为input添加了.75px的默认边框和1.5px的填充。 总计约4.5像素。 Chrome没有。

更新2

上面的修复仅使子元素恢复到我认为应该的大小。 下面接受的答案表明FF有一个错误，该错误解释了轮廓为什么不按预期方式运行，即仅轮廓父级，而不为绝对位置的后代扩展。

---

我有两个垂直放置的div元素，它们的outline属性设置为1px。 div元素的height为117px。

我希望两个div元素在哪里相交，其轮廓是连续的。 它没有任何内容。

当我将top = 97px和height = 20px的absolute定位输入放到top div ，该div的轮廓被下推。

这是一个小提琴 ，显示了这一点。 如果删除input ，您将看到顶部div轮廓位于底部div旁边。

我至少不了解两件事：

1）在使用浏览器的开发工具（Firefox）检查该框时，我发现顶部div实际上仍然高117px。 轮廓线应在div周围绘制，但似乎不是。 为什么？

2）输入的顶部为97px，高度为20px。 为什么这会影响轮廓的位置？ 看起来轮廓已下推4像素。

Answer 1

这是因为大纲取决于实现。 不只是尺寸：

轮廓可能不是矩形的。

在CSS3 UI中 ，

该规范未定义轮廓的确切位置或形状，但通常在边框的外部绘制。

Firefox历来有在各种情况下放大轮廓的趋势，例如

• 轮廓绘制在框阴影和其他视觉溢出的外部（即，由其扩展）
• 轮廓绘制在子元素的轮廓外部（由其扩展）

前者是固定的，后者似乎与您的问题相同。

Answer 2

我为您提供2个答案：

1）在使用浏览器的开发工具（Firefox）检查该框时，我发现顶部div实际上仍然高117px。 轮廓线应在div周围绘制，但似乎不是。 为什么？

轮廓似乎围绕内部的所有内容绘制。 因此，如果元素在底部突出100px。 轮廓也将移动100px。 在这种情况下，输入元素突出显示为8px。 因此，轮廓线比您预期的要长8px。

输入的顶部为97px，高度为20px。 为什么这会影响轮廓的位置？ 看起来轮廓已下推4像素。

您几乎就在那儿，97px + 20px的确是117px的高度。 但是您忘了从输入元素算起8px。 这来自3像素粗边框+ 1像素粗填充。