表格單元格高度顯示不同IE8 vs IE7 vs Firefox

Question

我遇到了IE8與IE7與Firefox顯示不同的問題。我的CSS是這樣的：

table.matrix_nested 
{ 
    border-collapse:collapse; 
} 
table.matrix_nested th 
{ 
    border-color:White; 
    background-color:white; 
    text-align:center; 
    vertical-align:middle; 
    color:Gray; 
    padding:10px; 
} 
table.matrix_nested td 
{ 
    border-width:1px; 
    border-style:inset; 
    border-color:gray; 
    padding:10px; 
    width:40px; 
    height:40px; 
    text-align:center; 
    vertical-align:middle; 
} 

我由40像素要在40像素大小均勻的細胞。 IE8顯示正確，但IE7和Firefox的高度較小。

有什麼想法？

---

我應該提供更多信息給我原來的帖子。看起來問題可能不在於單元格高度，而是填充。一個例子表是這樣的：

<table class="matrix_nested"> 
    <tr> 
    <th>5</th> 
    <td style='background-color: Yellow;' id='mp_21'> 
    <span class="cell_hidden">21</span> 
    </td> 
    <td style='background-color: Red;' id='mp_22'> 
    <span class="cell_hidden">22</span> 
    </td> 
    <td style='background-color: Red;' id='mp_23'> 
    <span class="cell_hidden">23</span> 
    </td> 
    <td style='background-color: Red;' id='mp_24'> 
    <span class="cell_hidden">24</span> 
    </td> 
    <td style='background-color: Red;' id='mp_25'> 
    <span class="cell_hidden">25</span> 
    </td> 
    </tr><tr> 
    <th>4</th> 
    <td style='background-color: Green;' id='mp_16'> 
    <span class="cell_hidden">16</span> 
    </td> 
    <td style='background-color: Yellow;' id='mp_17'> 
    <span class="cell_hidden">17</span> 
    </td> 
    <td style='background-color: Yellow;' id='mp_18'> 
    <span class="cell_hidden">18</span> 
    </td> 
    <td style='background-color: Red;' id='mp_19'> 
    <span class="cell_hidden">19</span> 
    </td> 
    <td style='background-color: Red;' id='mp_20'> 
    <span class="cell_hidden">20</span> 
    </td> 
    </tr><tr> 
    <th>3</th> 
    <td style='background-color: Green;' id='mp_11'> 
    <span class="cell_hidden">11</span> 
    </td> 
    <td style='background-color: Yellow;' id='mp_12'> 
    <span class="cell_hidden">12</span> 
    </td> 
    <td style='background-color: Yellow;' id='mp_13'> 
    <span class="cell_hidden">13</span> 
    </td> 
    <td style='background-color: Red;' id='mp_14'> 
    <span class="cell_hidden">14</span> 
    </td> 
    <td style='background-color: Red;' id='mp_15'> 
    <span class="cell_hidden">15</span> 
    </td> 
    </tr><tr> 
    <th>2</th> 
    <td style='background-color: Green;' id='mp_6'> 
    <span class="cell_hidden">6</span> 
    </td> 
    <td style='background-color: Green;' id='mp_7'> 
    <span class="cell_hidden">7</span> 
    </td> 
    <td style='background-color: Green;' id='mp_8'> 
    <span class="cell_hidden">8</span> 
    </td> 
    <td style='background-color: Yellow;' id='mp_9'> 
    <span class="cell_hidden">9</span> 
    </td> 
    <td style='background-color: Red;' id='mp_10'> 
    <span class="cell_hidden">10</span> 
    </td> 
    </tr><tr> 
    <th>1</th> 
    <td style='background-color: Green;' id='mp_1'> 
    <span class="cell_hidden">1</span> 
    </td> 
    <td style='background-color: Green;' id='mp_2'> 
    <span class="cell_hidden">2</span> 
    </td> 
    <td style='background-color: Green;' id='mp_3'> 
    <span class="cell_hidden">3</span> 
    </td> 
    <td style='background-color: Green;' id='mp_4'> 
    <span class="cell_hidden">4</span> 
    </td> 
    <td style='background-color: Yellow;' id='mp_5'> 
    <span class="cell_hidden">5</span> 
    </td> 
    </tr><tr> 
    </tr> 
    <tr> 
    <th></th> 
    <th>1</th> 
    <th>2</th> 
    <th>3</th> 
    <th>4</th> 
    <th>5</th> 
    </tr> 
</table>  

我注意到，如果我減少對TD填充爲5px的，細胞排隊更均勻。所以看來Firefox/IE7處理填充的方式與IE8不同？

Answer 1

在玩了一會之後，我發現問題實際上是由於填充。矩陣中的每個單元格都有值，但是隱藏（使用CSS display：none）。我在單元格中添加了填充。看起來IE8將填充視爲值不存在，因爲隱藏。但是IE7和FF將其視爲值在那裏。