9

次の HTML は、IE7-9 を含むすべての一般的なブラウザーで完全にレンダリングされますが、IE10 では失敗します。互換モードで IE10 を実行しても失敗します。

<html>
    <body>
        <table style="table-layout:fixed;width:500px">
        <colgroup>
            <col style="width:100px" ></col>
            <col ></col>
            <col style="width:100px" ></col>
            <col ></col>
        </colgroup>
        <tbody>
            <tr>
                <td colspan="2">
                    <div style="background:red;"> red </div>
                </td>
                <td colspan="2">
                    <div style="background:green;"> green </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

他のすべてのブラウザーでは 2 つのセルのサイズは同じですが、IE10 (少なくとも Windows7 で実行している場合) では、最初のセルが 2 番目のセルよりも幅が広くなっています。

IE 9/Windows 7 のこの HTML:

IE9 では

IE 10/Windows 7 の同じ HTML:

IE10で

テストページ: http://www.dinkypage.com/167605

報告されたバグ: https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly

この問題の解決策/回避策を知っている人はいますか?

更新: w3c 標準に違反しているため、報告されたバグを再度開くよう Microsoft に依頼しました。答えは次のとおりです。

「あなたが報告している問題は仕様によるものです。Internet Explorer は、列の幅を設定するために TD タグの最初のセットのみを使用します。」.

w3c 標準 ( http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout ) は次のように述べています。

固定テーブル レイアウト アルゴリズムでは、各列の幅は次のように決定されます。

  1. 'width' プロパティの値が 'auto' 以外の列要素は、その列の幅を設定します。
  2. それ以外の場合、'width' プロパティの値が 'auto' 以外の最初の行のセルによって、その列の幅が決まります。セルが複数の列にまたがる場合、幅は列に分割されます。
  3. 残りの列は、残りの水平表スペースを均等に分割します (境界線またはセル間隔を差し引いたもの)。

つまり、この機能は IE 10 では設計上壊れています。別のブラウザーを使用するか、IE 9 を使用することをお勧めします...

4

3 に答える 3

5

私の現在の回避策は次のスタイルです：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  table colgroup { display: table-row; }
  table colgroup col { display: table-cell; }
}

これにより、ブラウザーは colgroup/col を tr/td のように処理するようになり、Teemu の提案に似ています (ただし、醜い html ハックはありません)。メディア セレクターは、CSS を IE10+ にのみ表示します。

于 2013-03-12T08:07:52.010 に答える
3

実際、IE9でこれに遭遇しました。私が見つけた唯一の解決策は、実際、テーブルに隠しダミーの最初の行を入れることでした:

<tr style="visibility: hidden"><td></td><td></td><td></td><td></td></tr>

次に、結果のギャップを取り除くために、テーブル全体に負の margin-top を適用します。エレガントではありませんが、仕事を成し遂げているようです。

于 2013-03-27T09:26:50.983 に答える
1

普段はこんな感じで作っています

<colgroup width="100%"> // for table a whole
    <col width="50%">   // for each column
    <col width="50%">
</colgroup>

2 列の場合は 50%、3 列の場合は 33% など。

これはIE10で機能しました。

于 2015-04-29T08:07:16.087 に答える