提供字体大小、系列和行高时，Div 高度不正确答案

【问题标题】：Div height is incorrect when font size, family and line-height are supplied提供字体大小、系列和行高时，Div 高度不正确
【发布时间】：2013-03-12 15:21:32
【问题描述】：

我正在尝试在 div 上设置字体大小、系列和行高。然后，我需要知道某些布局内容的 div 的正确高度。但是，我得到的高度是错误的，并且出于同样的原因，div 的父级上出现了一个滚动条。以下 jsfiddle 最能说明我的问题： http://jsfiddle.net/JYkAX/19/

这里是html：

<div class="separator">
    <div class="PleaseNoScrollBar"> 
        Some Text Here
    </div>
</div>

这是css：

.separator
{
    background: gray;
    display: block;
    overflow: auto;
}

.PleaseNoScrollBar
{
    font-family: cursive;
    background: lightgray;
    line-height: 32px;
    font-size: 32px;
    display: block;
    opacity: 0.5;
    vertical-align: top;
}

以下 jquery 检索 div 的外部高度（但不正确）。

alert($(".PleaseNoScrollBar").outerHeight());

关于造成这种情况的任何想法？不幸的是，我需要能够检索 div 的实际外部高度，我不能只是让父 div 更大。

我应该提一下，滚动条只出现在 Chrome 和 IE 中。在 Firefox 中，可以通过拖动鼠标滚动 div，但不会出现滚动条。

【问题讨论】：

您能澄清一下您的实际期望吗？我查看了您提供的 jsFiddle，JS 警报弹出“32”，这正是您指定的。
为我工作，提醒32
当然。父级（'.separator'）是 32px。子 ('.PleaseNoScrollBar') 实际上大于 32px，这从它使父滚动的事实可以看出。

标签： html fonts css outerheight

【解决方案1】：

从容器 div 中删除 overflow:auto 声明。

.separator
{
    background: gray;
    display: block;
    overflow: auto;
}

来自 w3c 规范...

overflow: auto 'auto' 值的行为取决于用户代理，但应该导致为溢出提供滚动机制盒子。

来源：http://www.w3.org/TR/CSS21/visufx.html#overflow

这意味着编写浏览器的人决定overflow:auto 的工作方式。如果将. separator div 的高度设置为 34px，滚动条就会消失。

我建议从 .separator div 中删除 overflow:auto。

看看这个：http://jsfiddle.net/JYkAX/26/

如果容器 div 的高度设置为比子元素高度大两个像素以下，滚动条就会显示。我的猜测是，当声明“自动溢出”时，浏览器会在顶部和底部添加 1px 边框。

【讨论】：

这将摆脱滚动条。不幸的是，我还需要 '.PleaseNoScrollBar' div 的实际高度。
我首先需要知道为什么滚动条会出现在父级上，因为它的大小应该适合子级。
查看我的编辑，我还没有找到有关浏览器如何计算溢出高度的资源。

【解决方案2】：

您正在查看滚动条，因为您在 .separator 上设置了 overflow:auto;。只需将其删除，您将不再有滚动条。

至于高度，警报函数检索“32”，我认为这是 div 的正确高度。

【讨论】：

'Overflow: auto' 应该仅在其子级大于滚动条时才显示滚动条。因为我没有在“.separator”上设置大小，所以它不应该滚动..

【解决方案3】：

我在使用 Google Fonts 的字体时遇到了类似的问题，它隐式设置了 1.5em 的行高，而 jQuery 可能没有看到。一旦我明确地将 line-height:1.5em 写入我的 CSS 重置（或网站字体设置），就可以了。

【讨论】：