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顯示奇怪的計算高度：內嵌塊元素

回答

相關問題