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

我想要40px×40px的均匀大小的细胞。 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认为价值就在那里。

表格单元格高度显示不同IE8与IE7对比Firefox

1 个答案: