CSS line-height 小于 font-size 会导致 div 内出现奇怪的溢出

Question

我遇到了一些奇怪的 CSS 行为。但是，它在 Firefox、Chrome 和 IE (9) 中的工作方式完全相同，所以我怀疑它是 CSS 标准的一部分，但是，我找不到任何关于为什么会这样的引用。

我有一个包含一些文本的 div。当我设置的font-size大于line-height时，div的高度是用line-height计算的，但是内容却大了很多。也就是说，框中的文本比框本身大得多。我对这里的情况很困惑:

http://jsfiddle.net/RVgzV/4/

如果将鼠标移动到边界框上方，您可以看到悬停 css 在您进入 div 之前激活。同样，单击靠近但仍在框外的按钮会激活 javascript click 事件。在此处更容易看到内容框的位置:

http://jsfiddle.net/RVgzV/5/

当 div 上的显示属性设置为内联时(由于各种样式原因我不能这样做)，高度计算正确。另外，如果我将溢出属性设置为隐藏，问题就解决了。对我来说，这表明内容大于其包含框，但我不确定为什么。我特别想知道为什么对象的“高度”css 框模型属性小于页面上显示的实际高度。

我已经查看了 CSS 规范，但我没有在那里看到我的答案，但我怀疑我可能遗漏了什么。

编辑

我发现以下链接对我遇到的问题有一些引用，但我不知道它们的来源是什么，也不知道为什么会这样。

此外，作为对我收到的一些答复的回应，我不是在寻找如何修复我的 css 以便悬停问题不再出现，我是在寻找为什么它发生在第一名。

再次编辑显然，盒子的任何内容，无论是否在盒子的边界内，都会调用悬停在盒子上。 (请参阅 Lister 先生对 This answer 的评论。我真正想知道的是这种行为来自规范中的何处。它在那里吗？还是所有浏览器都同意的实现？

Answer 1

使用 overflow:hidden 隐藏 div 之外的任何东西。

它的行为是正确的，因为子元素可以存在于元素的 block 区域之外并且可以悬停。

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