CSS行高度小于字体大小会导致div中出现奇数溢出

我遇到了一些奇怪的CSS行为。然而，它在Firefox、Chrome和IE（9）中的工作原理完全相同，因此我怀疑它是CSS标准的一部分，但是，我找不到任何关于为什么会出现这种情况的参考

我有一个div，里面有一些文本。当我将字体大小设置为大于行高时，div的高度是使用行高计算的，但是内容要大得多。也就是说，框中的文本比框本身大得多。我对这里的情况有点不了解：

如果将鼠标移到边界框上方，则可以看到悬停css在进入div之前被激活。类似地，单击靠近但仍在框外的位置会激活javascript单击事件。这里更容易看到内容框的位置：

当div上的display属性设置为inline时，可以正确计算高度（由于各种样式的原因，我不能这样做）。此外，如果我将overflow属性设置为hidden，那么问题就解决了。对我来说，这表明内容比其包含框大，但我不知道为什么。我特别想知道为什么对象的“height”css框模型属性小于页面上显示的实际高度

我已经浏览了CSS规范，但没有看到我的答案，但我怀疑我可能遗漏了一些东西

编辑

我发现了下面的链接，其中提到了我遇到的问题，但我不知道它们的来源是什么，或者为什么会是这样

另外，作为对我收到的一些答案的回应，我不是在寻找如何修复我的css以使悬停问题不再出现，而是在寻找它首先发生的原因

再次编辑

---

显然，框中的任何内容，无论是否在框的边界内，都会在框上调用hover。（请参阅李斯特先生的评论。我真正想知道的是，这种行为在规范中来自何处。它在规范中吗？还是所有浏览器都同意的实现？

div的大小没有错误。这是正常的行为。 您错误地使用了CSS。div height是由其中的行数定义的。您指定的字体大小大于行高，这意味着只能使用最大行高来定义所需的行数

---

顺便问一下，定义大于行高的字体有什么意义？

使用overflow:hidden隐藏div之外的任何内容

它可以正确地作为子元素存在&可以在元素的块区域之外悬停

---

这种技术经常用于通过使用负边距/填充/绝对定位等来移动块元素的内部块。但是这些块始终保持父元素的悬停能力。

显然，我使用CSS不正确，否则会得到不同的结果。我的问题更多：我以什么方式使用CSS不正确y？规范明确规定字体大小可以大于线条高度。然后，编写规范的人没有考虑过。这就像试图将酒吧椅装在鞋盒中一样。在这种特殊情况下，我希望使虚线比其他情况下的虚线更大，而不扩大包含框的大小。但是为什么并不重要；我相信在很多情况下，你可能会想要这样的东西。问题是，如果我遵循CSS规范，为什么会发生这种行为，以及它在哪里指定。放大某些特定部分的字体大小不是问题，但你至少需要相同的线条高度t、 或将线条高度设置为“自动”（默认）因为你可以通过增加一个div中文本的行高来增大div，所以你也可以通过降低行高来减小div，这是很自然的。对我来说，唯一让我惊讶的是悬停区域变成了非矩形。是的，这也是我感到惊讶的。我希望把框变小我不想要的是悬停行为（正如我所提到的，可以通过使用overflow:hidden来解决）我在问题中提到，使用overflow:hidden解决了这个问题。我更感兴趣的是，为什么内容在其边界框之外时仍保持悬停功能。显然，div的每个子级都可以获得div的悬停功能，即使它们在div的边界之外。请看，跨度远超出div的地方，但仍然有贡献tes到div的属性。正如我所说，我也很惊讶！但这解释了它。如果我有足够的代表，我会对这条评论投赞成票，但不幸的是我没有。我仍然想知道这是所有浏览器都通用的实现细节，还是规范的一部分。我会更新问题以反映这一点。此外，如果你重写你的命令作为一个答案，没有人能够充分解释css规范的哪一部分指定了这种行为，我会接受它。