html - 提供字体大小、系列和行高时，div 高度不正确

Question

我正在尝试在 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 可以通过拖动鼠标滚动，但不会出现滚动条。

Answer 1

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

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