0

我在 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 像素 x 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 不同？

4

1 回答 1

0

在玩了更多之后，我发现问题实际上是由于填充造成的。矩阵的每个单元格内部都有值，但隐藏（使用 CSS 显示：无）。我在单元格中添加了填充。似乎 IE8 将填充视为值不存在，因为隐藏。但是 IE7 和 FF 认为它的价值就在那里。

于 2012-06-05T17:52:43.707 回答