0

次のマークアップを使用してネストされたテーブルを作成しました。最初のテーブルには典型的な行の例が含まれています。

<table class="outer">
    <tr>
        <td>
            <table class="column" id="left_column">
                <tr>
                    <td>
                        <table class="cell" id="t1">
                            <tr>
                                <td>
                                    <asp:Literal runat="server" ID="t1r2c0" />
                                </td>
                                <td>
                                    <asp:Literal runat="server" ID="t1r2c1" />
                                </td>
                                <td class="image">
                                    <span id="s1" runat="server">
                                        <asp:PlaceHolder ID="p1" runat="server">
                                        </asp:PlaceHolder>
                                    </span>
                                </td>
                                <td>
                                    <asp:Literal runat="server" ID="t1r2c3" />
                                </td>
                                <td class="gray">
                                    <asp:Literal runat="server" ID="t1r2c4" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t2">
                            <!-- ... -->
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table class="column" id="rightColumn">
                <!-- ... -->
            </table>
        </td>
    </tr>
</table>

そして、関連する CSS は次のとおりです。

#rightColumn table, #leftColumn table {
    width: 100%;
}
.cell {
    border-collapse: collapse;
    border: 2px solid black;
    margin: 5px;
}
.cell td {
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
    vertical-align: middle;
}
.image {
    padding: 0;
    margin: 0;
    width: 75px;
}

Firefox では、これは次のようにレンダリングされます。

ここに画像の説明を入力

しかし、IE6 では次のようにレンダリングされます。

ここに画像の説明を入力

IE では次の 2 つの問題が発生しています。

  1. すべてのテーブルに右側の境界線がありません。
  2. 右側の列の 2 番目と 3 番目の表では、これらのセルがクラス「画像」であり、75px の固定幅を持つ必要があるにもかかわらず、最後の列のサイズが任意です。

どんなアドバイスでも大歓迎です。

編集: #rightColumn テーブル、#leftColumn テーブル { 幅: 100%; 背景: 赤 }

ここに画像の説明を入力

4

1 に答える 1

0

IE がページを quirks モードでレンダリングしているかどうかを確認します。Quirks モードは特に要素の幅に影響を与えることが多いため、これが問題の原因の非常に有力な候補であることをお勧めします。

正しくレンダリングするには、ページが標準モードであることを確認する必要があります。

これは、ページの上部に有効な doctype があることを確認することで簡単に実行できます。

doctype がない場合は、有効な doctype を追加して標準モードで動作させることができますが、どれを使用すればよいかわからない場合は、次を使用してください。

<!DOCTYPE html>

それが役立つことを願っています。

于 2012-07-13T18:59:20.970 に答える