提供字体大小，字体和行高时，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

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

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

Answer 2

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

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

从w3c规范...

溢出：自动 “自动”值的行为取决于用户代理，但应导致为溢出的框提供滚动机制。

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

这意味着对浏览器进行编码的人员将确定“ overflow:auto工作方式。 如果您设置的高度. separator . separator div为34px，滚动条消失。

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

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

如果将容器div的高度设置为比子元素高度高两个像素以下的任何值，则会显示滚动条。 我的猜测是，当声明“自动过流”时，浏览器会添加添加到顶部和底部的1px边框。

Answer 3

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