0

HTMLテーブル要素のセル幅の問題に直面しています。テーブルセルの幅は、IE8とIE9で同じではありません。以下のコードスニペットを見つけてください。ここでは、テーブルcolgroupを使用してテーブルセルの幅を設定し、テーブルの幅を100％に設定しています。

[HTML]

 <table  id="Grid1_Table" class="Table">
   <colgroup>
    <col style="width:20px">
    <col style="width:20px">
    <col style="width:180px">
    <col style="width:200px">
  </colgroup>
 <tbody>
   <tr>
    <td class="RowHeader"><div>&nbsp;</div></td>
    <td class="RecordPlusCollapse" ><div>&nbsp;</div></td>
    <td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
  </tr>
 </tbody>

[CSS]

.RowHeader
 { 
    background-color : black;
 }

 .GroupCaption
 {    
    background-color : #868981;
 }
 .RecordPlusCollapse
 {  
    background-color : red;
 }
 .Table
 {
    width:100%;
 }

以下のフィドラーファイルを参照して、IE8およびIE9の問題を確認してください。

http://jsfiddle.net/KgfsM/21/

これを確認していただけませんか？

4

1 に答える 1

1

まず第一に、マークアップはHTMLテーブルモデルに違反しています。HTML5 doctypeを使用してコードスニペットを検証しようとすると（および欠落している</table>ものが追加された場合）、バリデーターは「要素colによって確立されたテーブル列4の先頭にセルがありません」というエラーを報告します。

次に、列の幅をピクセル単位で設定し、テーブルの合計幅を100％に設定します。これは、使用可能な幅がピクセル幅と境界線、境界線間隔、およびセル間隔の合計と一致する非常に特殊な場合を除いて、満たすことができない要求を構成します。ブラウザがこれに対して異なる反応をするのも不思議ではありません。

したがって、幅を一貫して指定する必要があります。100％幅の設定を削除するか、列幅設定の少なくとも1つを削除してください。それでも問題が発生する可能性があり（ブラウザはこれに対しても異なる反応を示す可能性があります）、table-layout: fixed役に立たない（または新しい問題を引き起こす可能性があります）が、新しい、比較的明確に定義された問題が発生します。

于 2013-02-20T05:35:30.157 に答える