IE8 在 IE8 标准兼容模式下无法正确呈现

Question

我使用以下标记创建了一些嵌套表，其中第一个表包含行示例。 span 内部 HTML 最终将替换为用户通过下拉菜单选择的图像。

<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="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：

.outer
{
    border: none;
    margin-left: auto;
    margin-right: auto;
}
.outer td
{
    vertical-align: top;
}
.column
{
    border: none;
}
#rightColumn table, #leftColumn table
{
    width: 100%;
}
.cell
{
    border-collapse: collapse;
    border: 2px solid black;
    margin: 5px;
    overflow: hidden;
}
.cell td
{
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
    vertical-align: middle;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 10pt;
}
.cell .image
{
    padding: 0;
    margin: 0;
    height: 20px;
    width: 65px;
}

下面是它在标准遵从模式下在 IE8 中的显示截图：

请注意，在右侧列的第 3 和第 4 个表格中，最右侧的图像字段具有任意宽度（在图像的任一侧显示空白），尽管这些单元格都是 class="image"并且应该有一个 65px 的固定宽度。 DOCTYPE 声明是呈现的 HTML 的第一行，我在开发人员工具中检查了 IE8 的模式符合标准。

我真的很想修复这两个表格单元格。任何建议表示赞赏。

问候。

编辑：这是受影响表格的 HTML：

<table class="cell" id="t5">
    <tr><th colspan="9"><strong><asp:Literal runat="server" ID="t5r0c0" /></strong></th></tr>
    <tr><td class="orange" colspan="4"><asp:Literal runat="server" ID="t5r1c0" /></td><td class="blue" colspan="4"><asp:Literal runat="server" ID="t5r1c4" /></td><td class="blue span2" rowspan="2"><asp:Literal runat="server" ID="t5r1c8" /></td></tr>
    <tr><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c0" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c2" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c4" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c6" /></td></tr>
    <tr><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c0" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c2" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c4" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c6" /></td><td class="image"><span id="s21" runat="server"><asp:PlaceHolder ID="p21" runat="server"></asp:PlaceHolder></span></tr>
</table>

<table class="cell" id="t6">
    <tr><th colspan="9"><strong><asp:Literal runat="server" ID="t6r0c0" /></strong></th></tr>
    <tr><td class="orange" colspan="4"><asp:Literal runat="server" ID="t6r1c0" /></td><td class="blue" colspan="4"><asp:Literal runat="server" ID="t6r1c4" /></td><td class="blue span2" rowspan="2"><asp:Literal runat="server" ID="t6r1c8" /></td></tr>
    <tr><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c0" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c2" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c4" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c6" /></tr>
    <tr><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c0" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c2" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c4" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c6" /></td><td class="image"><span id="s22" runat="server"><asp:PlaceHolder ID="p22" runat="server"></asp:PlaceHolder></span></td></tr>
</table>

编辑：将 style="width: 100%" 添加到所有 colspan=2 元素：

这样做的效果在两个受影响的表上是不同的。第一列大大扩展，而其他列大大减少。

Answer 1

几个想法

我注意到它是 Intranet。您提到“模式”是 IE8 标准 - 是浏览器 和 文件吗？ IE8 会在intranet mode. 中做奇怪的 事情

不确定是不是拼写错误，但是表 t5 没有关闭最后一个<td>

当您设置图像占位符的内容时，任何空格都不会潜入标记中吗？

Answer 2

问题可能与设置了colspan 的其他表格单元格有关。尝试在其他单元格上设置宽度，如以下问题所回答：Internet Explorer 8 table cell width bug with colspan set