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

【问题标题】：CSS line-height smaller than font-size results in odd overflow within a divCSS line-height 小于 font-size 导致 div 内的奇怪溢出
【发布时间】：2012-04-10 17:10:00
【问题描述】：

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

我有一个 div，里面有一些文字。当我设置font-size大于line-height时，div的高度是用line-height计算的，但是内容要大很多。也就是说，框中的文本比框本身大得多。我对这里的情况有一个 jsfiddle：

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

如果您将鼠标移动到边界框上方，您可以在进入 div 之前看到悬停 css 激活。同样，单击靠近但仍在框外会激活 javascript 单击事件。在这里查看内容框的位置稍微容易一些：

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

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

我查看了 CSS 规范，但没有看到我的答案，但我怀疑那里可能有我遗漏的东西。

编辑

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

另外，对于我收到的一些答案，我不是在寻找如何修复我的 CSS 以使悬停问题不再出现，我在寻找 为什么 它发生在第一名。

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

【问题讨论】：

既然你可以通过增加其中文本的行高来使 div 变大，当然你也可以通过降低行高来使 div 变小。对我来说唯一的惊喜是悬停区域变成了非矩形。
是的，这也是我感到惊讶的地方。我希望使用 line-height 使框更小，我不想要的是悬停行为（正如我所提到的，可以通过使用 overflow:hidden 来解决）

标签： css

【解决方案1】：

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

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

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

【讨论】：

我在问题中提到使用溢出：隐藏可以解决问题。我更感兴趣的是为什么内容在其边界框之外保持悬停能力。
显然，div 的每个孩子都获得了 div 的可悬停性，即使它们超出了 div 的边界。请参阅this jsFiddle，其中跨度远在 div 之外，但仍对 div 的属性有贡献。正如我所说，我也很惊讶！但这解释了它。
如果我有足够的代表，我会支持这条评论，但不幸的是我没有。我仍然想知道这是所有浏览器通用的实现细节，还是规范的一部分。我将更新问题以反映这一点。另外，如果您将您的评论重写为答案，并且没有人可以充分解释 css 规范的哪一部分指定了这种行为，我会接受它。

【解决方案2】：

div 的大小不正确。这是正常行为。您错误地使用了 CSS。 div-height 由其中的行数定义。你给了一个比行高更大的字体大小，这意味着它只能用 max-line-height 来定义需要的行数。

顺便问一下，定义 font-seize 大于 line-height 有什么意义？

【讨论】：

显然，我使用的 CSS 不正确，否则我会得到不同的结果。我的问题更多：我以什么方式错误地使用 CSS？规范特别指出字体大小可以大于行高。
那么编写规范的人没有考虑过。这就像试图将酒吧椅装在鞋盒中一样
在这种特殊情况下，我想让我的破折号比其他情况更大，而不扩大包含框的大小。但是为什么并不重要；我敢肯定，在很多情况下您可能想要这样的东西。问题是，如果我遵循 CSS 规范，为什么会发生这种行为，以及它在哪里指定。
放大某些特定部分的font-size不是问题，但是至少需要相同的line-height，或者将line-height设置为auto（默认）