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

<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中发生两件事:


每个表都缺少右边框。
尽管这些单元格为“图像”类,并且固定宽度为75px,但右列中的第二张和第三张表格的最后一列具有任意大小。


任何意见是极大的赞赏。

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

最佳答案

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

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

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

如果您没有文档类型,则可以添加任何有效的文档类型以使其在标准模式下工作,但是如果您不确定要使用哪个文档类型,只需使用以下命令:

<!DOCTYPE html>


希望能有所帮助。

10-05 20:36
查看更多