爲什麼可以放入32像素高度的表格單元生長超過指定的高度？

Question

已解決。

這是一個例子：

HTML：

<table> 
    <tbody> 
    <tr style="height: 100%;"> 
     <td class="lefttd"> 
     <a href="#mmenu" style=""><img src="http://www.numbeo.com/images/Menu1.svg"></a> 
     </td> 
     <td></td> 
     <td class="righttd"><img src="http://www.online-utility.org/icons/gear_64.png" style="margin-right: 0.5em;">Online-Utility.org </td> 
    </tr> 
    </tbody> 
</table> 

CSS：

table { 
    border-bottom: 1px solid black; 
    border-spacing: 0; 
    background-color: #bcf; 
    width: 100%; 
} 

table > tr, table > tr > td { 
    padding: 0; 
    margin: 0; 
    border: 0; 
    border-spacing: 0; 
} 

.lefttd { 
    height: 100%; 
    vertical-align: middle; 
} 

.righttd { 
    width: 95%; 
    height: 32px; 
    text-align: right; 
    font-size: 22px; 
    line-height: 30px; 
    vertical-align: middle; 
} 

a.mmenu { 
    border: 0; 
    text-decoration: none; 
    background-color: #aaa; 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; 
} 

img { 
    width: 32px; 
    border: 0; 
    text-decoration: none; 
    vertical-align: middle; 
} 

https://jsfiddle.net/adamovic/sw6c3z91/

在Chrome中我看到這個表高度35px計算...什麼導致此表增長高度超過32像素，以及如何解決它？

Answer 1

添加vertical-align: middle;你的形象

<img src="http://www.online-utility.org/icons/gear_64.png" style="width: 32px; margin-right: 0.5em; vertical-align: middle;"> 

而且，你不應該被內聯樣式這個樣子。這是一個可怕的做法。改爲使用類和樣式表。

編輯：你也可以嘗試一些其他的值。它看起來像vertical-align:bottom可能會更好。它看起來與字體大小和行高，這將讓你更接近32px。中間大約在33px

Answer 2

問題已解決。我沒有正確標記爲imgvertical-align: middle以及padding: 0到tr/td。