Question

我使用以下标记创建了嵌套表，其中第一个表包含典型行的示例：

<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中，这样呈现：

enter image description here

但在IE6中它呈现如下：

enter image description here

IE中出现两件事：

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

非常感谢任何建议。

编辑：#rightColumn表，＃leftColumn表{width：100％;背景：红色}

enter image description here

Answer 1

检查IE是否正在渲染您的页面是否处于怪异模式。 Quirks模式通常会影响元素宽度，所以我建议这是一个非常强大的候选问题。

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

通过确保页面顶部有一个有效的文档类型，可以轻松完成此操作。

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

<!DOCTYPE html>

希望有所帮助。

在IE6中任意列大小和缺少边框

1 个答案: