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

我有一个问题，其中我有一个div的计算高度不正确。从jsFiddle的javascript部分引用。div显示奇怪的计算高度：内嵌块元素

向右看，您可以看到div和ela都没有占用足够的空间来使div.row的高度很高。
在Chrome中，我得到的高度是24px（当内容应该更小时，内容为20px，填充4px）。
在IE中我得到的高度是22.4px（因此18.4px的内容仍然是错误的）。
高度应该是这样的知识+或18像素，我认为（所以13像素或实际内容14px的）

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

这里是HTML，其中< DIV CLASS = “行” >是具有高度问题

<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; 
}

来源

2014-02-27 Coburn

有错误的jsFiddle链接，更新了我打算粘贴的链接。 – Coburn

想通了。由于字体仅设置在子div（div.ela，div.elb）而不是父行div上，因此行高在父div.row上完全不同，导致该框比正常大（也是由于其中的所有元素都是内联块）。我想它默认为基于任何字体会在那里我添加了一些文本（确认，它看起来像这是它做了什么）的线高度。 – Coburn

想通了。由于字体仅设置在子div（div.ela，div.elb）而不是父行div上，因此行高在父div.row上完全不同，导致该框比正常大（也是由于其中的所有元素都是内联块）。我想它默认为基于任何字体会在那里我添加了一些文本（确认，它看起来像这是它做了什么）的线高度。

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

来源

2014-02-28 14:08:46 Coburn

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

回答

相关问题