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 div的高度设置为34px，则滚动条会消失。

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

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

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

Answer 3

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

提供字体大小，族和行高时，Div高度不正确

3 个答案: