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

40px x 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 とは異なる方法でパディングを処理しているようですか?

4

1 に答える 1

0

これをもう少しいじってみると、問題は実際にはパディングが原因であることがわかりました。マトリックスの各セルには内部に値がありますが、非表示になっています (CSS display: none を使用)。セルにパディングを追加しました。IE8 は、非表示になっているため、値が存在しないかのようにパディングを扱うようです。しかし、IE7 と FF は値が存在するかのように処理します。

于 2012-06-05T17:52:43.707 に答える