0

我正在尝试在 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，但不会出现滚动条。

4

3 回答 3

1

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

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

于 2013-03-22T17:03:14.143 回答
0

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

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

从 w3c 规范...

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

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

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

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

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

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

于 2013-03-22T17:02:04.857 回答
0

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

于 2019-01-08T14:32:13.653 回答