Question

我遇到的问题是我所计算的div的高度不正确。引用jsFiddle的javascript部分。

向右看，你可以看到两个div和elb都没有占据足够的空间来使div.row的高度变高。
  在Chrome中，我的高度为24px（当内容应该更小时，内容为20px，填充量为4px）。
  在IE中，我得到的高度为22.4px（因此18.4px的内容仍然是错误的）   我认为高度应该是17px或18px（实际内容为13px或14px）

这是小提琴。在这里，我还添加了一个按钮来打开和关闭内容，它只留下一个带有display：inline-block的div。 http://jsfiddle.net/y7L7q/59/

这是HTML，其中＆lt; div class =“row”＆gt;是有高度问题的人

<div id="navList">
    <div class="row">
        <div class="ela">@</div>
        <div class="elb">TheThing</div>
    </div>
</div>

这是CSS

#navList
{
    display:inline-block;
    margin-left:0;
    margin-right:auto;
}
#navList > div.row
{
    margin-top:3px;
    padding-right:2px;
    padding-left:5px;
    padding-top:2px;
    padding-bottom:2px;

    background-color:#DDDDDD;
}
#navList > div.row > div.ela, #navList > div.row > div.elb
{
    display:inline-block;
    width:20px;
    vertical-align:top;

    background-color:#FFDDDD;

    text-align:center;
    font-size:11px;
    font-weight:bold;
    font-family:Verdana,sans-serif;
}
#navList > div.row > div.elb
{
    width:120px;
}
#navList > div.row > div.elDEMO
{
    display:inline-block;
}

Answer 1

想出来。因为字体仅设置在子div（div.ela，div.elb）而不是父行div上，所以父div.row上的行高完全不同，导致框大于正常（也是由于其中的所有元素都是内联块的事实。我猜它默认为行高，基于我曾经添加过一些文字的字体（确认，它看起来就是这样）。

因此，修复方法是确保将父div上的字体设置为与子div相同或更小的字体，以便父级正确调整大小。

div显示的奇怪计算高度：内联块元素

1 个答案: