設置表格高度會在插入等高圖像時擴大

Question

我正在創建用於移動導航的標題。我決定使用一個表格，因爲這個網站有一個響應式佈局，並且表格中的最後一個項目需要有一個動態寬度（並且一個表格對此非常出色）。

但是我遇到了最後一個問題。對於表格（60x60）中的第一個「主頁按鈕」，如果我在其中插入60x60圖像，表格的高度將從其60px的設置值增加到65〜66px左右。當在瀏覽器中檢查表時，我無法找到導致額外高度的原因（無填充/邊距/邊框/等）。

我已經成立了一個小提琴，顯示的行爲：http://jsfiddle.net/4QC8S/3/

HTML：

<div class="table"> 
    <div class="myimg"><img src="http://i.imgur.com/oxRzF30.png"></div> 
    <div class="tablecell"><img src="twitter.png"></div> 
    <div class="tablecell"><img src="youtube.png"></div> 
    <div class="tablecell"><img src="apple.png"></div> 
    <div class="tablecell"><img src="email.png"></div> 
</div> 

CSS：

.table { 
    display:table; 
    margin-right:auto; 
    margin-left:auto; 
    width:100%; 
    height: 60px; 
} 

.tablecell { 
    display:table-cell; 
    text-align:center; 
    border: 1px solid black; 
} 

.myimg { 
    display:table-cell; 
    text-align:center; 
    border: 1px solid black; 
    width: 60px; 
} 

如果你改變了第一個HTML表格單元格有一個無效的圖像像其他單元格一樣，表格將返回到60px的高度。第二個你給它一個高度爲60px的有效圖像，表格高度會擴大。

任何想法？我讀過一些關於表格可能奇怪地處理圖像的東西。有沒有解決方法？任何可以強制桌面高度保持在60px的方法？我已經嘗試在包含圖像的單元格中嵌入塊div，並且嘗試在CSS中更改img屬性以顯示：沒有骰子的塊。在此先感謝您的時間

Answer 1

嘗試將line-height:0;設置爲表格項，如果僅使用圖像，則可以。如果你使用的文字，則需要新的容器用適當的line-height

http://jsfiddle.net/NicoO/4QC8S/5/

.table { 
    display:table; 
    margin-right:auto; 
    margin-left:auto; 
    width:100%; 
    height: 60px; 
    line-height:0; 
}