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 中出现了两件事：

  1. 每张桌子都缺少右侧边框。
  2. 右侧列中的第 2 和第 3 个表格的最后一列具有任意大小，尽管这些单元格是“图像”类并且应该具有 75 像素的固定宽度。

任何意见是极大的赞赏。

编辑：#rightColumn 表，#leftColumn 表 { 宽度：100%; 背景：红色}

在此处输入图像描述

4

1 回答 1

0

检查 IE 是否正在呈现您的页面是否处于怪癖模式。Quirks 模式通常会特别影响元素宽度，因此我建议这是导致您的问题的一个非常有力的候选者。

您应该确保页面处于标准模式以便正确呈现。

这很容易通过确保页面在页面顶部具有有效的文档类型来完成。

如果您没有 doctype，您可以添加任何有效的 doctype 以使其在标准模式下工作，但如果您不确定要使用哪个，只需使用以下内容：

<!DOCTYPE html>

希望有帮助。

于 2012-07-13T18:59:20.970 回答